Featured

Next.js CLAUDE.md Template

Comprehensive CLAUDE.md for Next.js App Router projects

Category:templates
Type:template
Difficulty:beginner
Language:Markdown
nextjs
react
typescript
beginner

Description

Production-ready CLAUDE.md template for Next.js projects using the App Router. Covers project structure, routing conventions, data fetching patterns, server components vs client components, and deployment to Vercel.

Content

Resource Content
# Next.js Project

## Overview
Next.js application using the App Router with React Server Components.

## Tech Stack
- Framework: Next.js 15
- Language: TypeScript
- Styling: Tailwind CSS
- State: React Context / Zustand

## Key Commands
```bash
npm run dev      # Start dev server on port 3000
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run ESLint
npm run test     # Run tests
```

## Project Structure
```
src/
├── app/           # App Router pages and layouts
│   ├── layout.tsx # Root layout
│   ├── page.tsx   # Home page
│   └── api/       # API routes
├── components/    # React components
│   ├── ui/        # UI primitives
│   └── features/  # Feature components
├── lib/           # Utilities and helpers
├── hooks/         # Custom React hooks
└── types/         # TypeScript types
```

## Conventions
- Use Server Components by default
- Add 'use client' only when needed (interactivity, hooks)
- Colocate components with their routes when specific
- Use `@/` path alias for imports

## Important Notes
- API routes in `app/api/` use Route Handlers
- Use `next/image` for optimized images
- Environment variables: `.env.local` for secrets