Back to guide/AI Tool Configs

CLAUDE.md — Next.js + TypeScript + Tailwind

Production CLAUDE.md template for Next.js App Router projects with TypeScript strict mode and Tailwind CSS.

claude-mdnextjstypescripttailwindai-config
Edit View
Prompt
# CLAUDE.md

## Project Overview
{{project_name}}{{one-line description}}

## Tech Stack
- Framework: Next.js 14+ (App Router)
- Language: TypeScript (strict mode)
- Styling: Tailwind CSS + shadcn/ui
- Database: {{database}} (e.g., PostgreSQL via Supabase)
- ORM: {{orm}} (e.g., Drizzle ORM, Prisma)
- Auth: {{auth_provider}}

## Commands
```bash
npm run dev       # Start dev server
npm run build     # Production build
npm run lint      # Run ESLint
npm run test      # Run tests
```

## Directory Structure
```
src/
├── app/          # App Router pages and layouts
├── components/
│   ├── ui/       # shadcn/ui primitives
│   └── {{domain}}/  # Feature-specific components
├── lib/
│   ├── actions/  # Server actions
│   ├── hooks/    # Custom React hooks
│   └── utils.ts  # Shared utilities
└── types/        # TypeScript type definitions
```

## Conventions
- Components: PascalCase.tsx
- Utilities: kebab-case.ts
- Server actions: kebab-case-actions.ts
- Use `cn()` from lib/utils for conditional classes
- Prefer server components; add 'use client' only when needed
- Import order: React > external > @/ aliases > relative > types

Variables to customize

{{project_name}}{{one-line description}}{{database}}{{orm}}{{auth_provider}}{{domain}}

Why this prompt works

Claude Code reads CLAUDE.md on every session start. Having the full stack, commands, and directory structure upfront eliminates 80% of wrong-guess edits.

Save this prompt to your library

Organize, version, and access your best prompts across ChatGPT, Claude, and Cursor.