Next.js
/Advanced
Scalable Folder Structure
Definition
Designing a project directory hierarchy that anticipates immense growth, preventing 'spaghetti code' as the application scales to hundreds of routes and components.
Explain Like I'm New
If you throw all your clothes onto the floor, finding a sock takes 10 minutes. If you use a dresser with labeled drawers, finding a sock takes 2 seconds. A scalable folder structure is the dresser for your code.
Real World Example
Creating strict boundaries between the `app` directory (strictly for routing and layouts) and a `lib` or `features` directory (where the actual business logic lives), so the router doesn't get cluttered.
Common Use Cases
- •Enterprise applications
- •Onboarding new developers
Terminal Output
bash / terminal
/*
Enterprise Next.js Folder Structure:
my-project/
├── .env
├── next.config.js
├── package.json
└── src/
├── app/ # Strictly routing, pages, layouts
│ ├── (auth)/login/page.tsx
│ └── dashboard/page.tsx
│
├── components/ # Global UI elements
│ ├── ui/ # Dumb components (Button, Modal)
│ └── layouts/ # Shared wrappers (Navbar, Footer)
│
├── features/ # Feature-based logic
│ ├── authentication/ # Everything related to auth
│ └── billing/ # Everything related to Stripe/payments
│
├── lib/ # Core utilities and configs
│ ├── db.ts # Prisma/Postgres connection
│ ├── stripe.ts # Stripe client
│ └── utils.ts # Math/Date helpers
│
└── types/ # Global TypeScript definitions
*/
Interview Questions
basic
- What is the purpose of a `components/ui` folder vs a `components/shared` folder?
intermediate
- Why do enterprise teams often prefer placing the `app` directory inside a `src` directory?