🚀 Next.js Quickstart Guide

• How to create pages and components in Next.js 14+
• How to use Tailwind CSS and shadcn/ui for beautiful UIs
• How to add dynamic features (client/server components, API routes)
• How to structure your VibeCodex project
• How to use AI to accelerate your workflow

vibecodex/
├── app/            # Pages & layouts (App Router)
├── components/     # Reusable React components
│   ├── ui/         # shadcn/ui components
│   └── [feature]/  # Feature-specific components
├── lib/            # Utilities & helpers
├── public/         # Static assets
├── hooks/          # Custom React hooks
├── styles/         # Global styles (Tailwind)
└── docs/           # Documentation

1. Add a file: app/hello/page.tsx
2. Write your component:

   
   export default function HelloPage() {
     return <h1 className="text-3xl font-bold">Hello, VibeCodex! 👋</h1>;
   }

3. Visit: http://localhost:3000/hello

"use client";
import { useState, useEffect } from "react";

export function LiveClock() {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
    const timer = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);
  return <span>{now.toLocaleTimeString()}</span>;
}

1. Create: app/api/hello/route.ts
2. Write your API handler:

   
   import { NextResponse } from "next/server";
   
   export async function GET() {
     return NextResponse.json({ message: "Hello from API!" });
   }

3. Test: http://localhost:3000/api/hello

1. Add a file: app/greet/[name]/page.tsx
2. Write your dynamic page:

   
   import { useParams } from "next/navigation";
   
   export default function GreetPage() {
     const params = useParams();
     return <h1>Hello, {params.name}!</h1>;
   }

3. Visit: http://localhost:3000/greet/yourname

• Next.js Documentation
• Tailwind CSS Docs
• shadcn/ui Docs
• VibeCodex Guides