Code-MCP

# Next.js Starter Template ## Quick Start ```bash npx create-next-app@latest my-app --typescript --tailwind --eslint --app cd my-app npm run dev ``` ## App Router Structure (Next.js 14+) ``` app/ ├── layout.tsx # Root layout ├── page.tsx # Home page ├── globals.css # Global styles ├── api/ # API routes │ └── route.ts ├── (auth)/ # Route groups │ ├── login/ │ └── register/ ├── dashboard/ │ ├── layout.tsx # Nested layout │ └── page.tsx └── [slug]/ # Dynamic routes └── page.tsx components/ ├── ui/ # shadcn/ui components ├── forms/ # Form components └── layouts/ # Layout components lib/ ├── utils.ts # Utility functions ├── db.ts # Database client └── auth.ts # Auth helpers ``` ## Essential Dependencies ```bash # Database npm install prisma @prisma/client npx prisma init # Auth npm install next-auth # UI npx shadcn-ui@latest init # Validation npm install zod # State npm install zustand ``` ## Key Concepts - **Server Components**: Default, run on server - **Client Components**: Add `"use client"` directive - **Server Actions**: Form handling without API routes - **Route Handlers**: API routes in `app/api/` - **Middleware**: `middleware.ts` for auth, redirects ## Best Practices 1. Use Server Components by default 2. Fetch data in layouts/pages, not components 3. Use loading.tsx and error.tsx for UX 4. Implement proper SEO with metadata 5. Use environment variables for secrets