developer
Project Structure Generator
Generate recommended project folder structures for different frameworks and architectures. Copy as text or create commands.
Next.js (App Router)
my-nextjs-app/ ├── app/ │ ├── layout.tsx │ ├── page.tsx │ ├── globals.css │ ├── (auth)/ │ │ ├── login/ │ │ └── register/ │ ├── api/ │ │ └── route.ts │ └── dashboard/ │ └── page.tsx ├── components/ │ ├── ui/ │ ├── layout/ │ └── forms/ ├── lib/ │ ├── utils.ts │ └── constants.ts ├── hooks/ │ └── use-debounce.ts ├── types/ │ └── index.ts ├── config/ │ └── site.ts ├── features/ │ └── auth/ │ ├── components/ │ └── actions.ts ├── public/ │ ├── images/ │ └── fonts/ ├── next.config.ts ├── tailwind.config.ts ├── tsconfig.json └── package.json
Folder purposes
- app/
- Routes, layouts, and API endpoints using the App Router convention
- components/
- Reusable UI components organized by type (ui, layout, forms)
- lib/
- Utility functions, constants, and shared logic
- hooks/
- Custom React hooks for shared stateful logic
- types/
- TypeScript type definitions and interfaces
- config/
- App configuration, site metadata, and environment settings
- features/
- Feature-specific code with co-located components and logic
- public/
- Static assets served directly (images, fonts, favicons)
Frequently asked questions
A well-organized folder structure makes your code easier to navigate, maintain, and scale. It also helps new contributors understand where things belong.
These are recommended starting points based on community best practices. Adapt them to your specific project needs — the goal is consistency, not rigid compliance.
The "Copy as mkdir commands" button gives you shell commands you can paste into your terminal to instantly create the entire folder structure for a new project.