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)