my-next-app/
├── public/
├── src/
│   ├── app/               # App router (if using Next.js 13+)
│   ├── components/        # Reusable UI components
│   ├── features/          # Feature-based modules
│   ├── hooks/             # Custom React hooks
│   ├── layouts/           # Layout templates
│   ├── lib/               # Utility libs and helpers
│   ├── services/          # API and external services
│   ├── types/             # TypeScript types and enums
│   ├── styles/            # Global styles and theming
│   ├── middleware.ts      # Middleware logic
│   └── utils/             # Reusable logic utils
├── .env.local             # Environment variables
├── next.config.js         # Next.js config
├── tailwind.config.js     # Tailwind (if used)
├── tsconfig.json          # TypeScript config
└── README.md

Now let me break it down folder-by-folder.

src/app/: App Router (Next.js 13+)

If you're using the App Router in Next.js 13+, this is where your routing logic lives.

src/app/
├── layout.tsx
├── page.tsx
├── dashboard/
│   └── page.tsx

Use server components here when possible. Organize folders to match your route hierarchy.

components/: Reusable UI Building Blocks

This folder contains dumb/presentational components. Keep them pure and reusable.

• Button.tsx
• Card.tsx
• Modal.tsx
• Loader.tsx

Structure it by domain if needed: components/ui/, components/form/, etc.

features/: Feature-Based Module Separation

This is where your scalability kicks in. Each folder represents a domain feature and contains everything related to it.

features /
├── auth /
│   ├── LoginForm.tsx
│   ├── authSlice.ts
│   └── authAPI.ts
├── dashboard /
│   ├── Dashboard.tsx
│   └── dashboardService.ts

Think of this as micro frontends within your monorepo.

hooks/: Custom React Hooks

Every large app ends up with custom logic that you use repeatedly. Keep your custom hooks here:

• useAuth.ts
• useWindowSize.ts
• useDebounce.ts

It cleans up your components and encourages reuse.

layouts/: Page Layouts

Define layout templates used across the app.

layouts/
├── MainLayout.tsx
├── AuthLayout.tsx
└── DashboardLayout.tsx

Use these to enforce design consistency across pages.

services/: API Abstractions

This is where you interact with your backend APIs.

// services/userService.ts
import axios from "axios"
export const fetchUsers = () => axios.get('/api/users');

Never put API calls directly inside your components.

types/: Global TypeScript Types

Helps avoid redundant definitions.

• User.ts
• ApiResponse.ts
• Theme.ts

styles/: Global Styles and Configs

Used for:

• Tailwind base styles
• SCSS variables
• Theme definitions

// styles/theme.ts
export const lightTheme = { ... };

lib/ and utils/: Helper Logic

Place shared utility functions and libraries here:

• formatDate.ts
• slugify.ts
• tokenUtils.ts

Pro Tips for Scaling

1. Use absolute imports with tsconfig.json
2. Barrel export folders for cleaner imports
3. Add ESLint, Prettier, and Husky for consistency
4. Use CI/CD (GitHub Actions, Vercel) from day 1
5. Automate lint + typecheck in PRs

Wrapping Up

Folder structure is the silent enabler of developer velocity. When your Next.js app grows, this structure will help you:

• Scale across teams
• Stay consistent across features
• Reduce cognitive load
• Build with confidence

Don't just write Next.js apps. Architect them.

Resources

1. https://nextjs.org/docs/app/building-your-application/routing