Agent skill
nextjs-project-scaffolding
Opinionated Next.js 14+ project structure and configuration for scaffolding new projects. PROACTIVELY activate for: (1) setting up new Next.js projects, (2) configuring tsconfig.json with strict mode, (3) establishing folder structure patterns. Triggers: "new project", "scaffold", "project structure"
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/nextjs-project-scaffolding
SKILL.md
Next.js Project Scaffolding
Recommended Folder Structure
project-root/
├── src/
│ ├── app/ # Next.js App Router (routes, layouts, pages)
│ │ ├── api/ # API route handlers
│ │ ├── actions/ # Server Actions
│ │ ├── layout.tsx # Root layout
│ │ └── page.tsx # Home page
│ ├── components/
│ │ ├── ui/ # Reusable UI components
│ │ ├── forms/ # Form components
│ │ └── layouts/ # Layout components (headers, footers)
│ ├── lib/
│ │ ├── utils/ # Utility functions
│ │ └── validations/ # Zod schemas
│ ├── types/
│ │ ├── api/ # API types
│ │ └── models/ # Data model types
│ ├── hooks/ # Custom React hooks
│ └── styles/ # Global styles
├── public/ # Static assets
├── docs/
│ └── adr/ # Architecture Decision Records
├── tsconfig.json # TypeScript config (strict mode)
├── next.config.js # Next.js config
├── .env.local # Environment variables (gitignored)
└── .env.example # Environment variable template
Key Configuration: tsconfig.json (Strict Mode)
json
{
"compilerOptions": {
"strict": true,
"noUncheckedIndexedAccess": true,
"noImplicitOverride": true,
"target": "ES2022",
"lib": ["ES2022", "dom", "dom.iterable"],
"paths": {
"@/*": ["./src/*"]
}
}
}
Critical settings:
"strict": true- Enables all strict type-checking"noUncheckedIndexedAccess": true- Array access returnsT | undefined"@/*"path alias for clean imports
Baseline Dependencies
Production:
next@^14.0.0react@^18.2.0typescript@^5.3.0zod@^4.1.12(validation)zustand@^5.0.2(state management)
Development:
prettier@^3.0.0eslint-config-prettier@types/node@^20
Rationale for /src Directory
Using the /src directory:
- Separates source code from configuration files (cleaner root)
- Standard convention in modern Next.js projects
- Improves project navigation and organization
For More Details
For full project setup including environment variables, scripts, and step-by-step instructions, reference the /setup-project command or see the complete template in skills/nextjs-project-scaffolding/resources/full-template.md.
Didn't find tool you were looking for?