Project Structure
Overview
Next.js enforces a specific project structure to enable its features. In the App Router, the app/ directory contains all your routes, layouts, and pages. The public/ directory is for static assets, and next.config.js is for framework configuration.
Syntax
my-next-app/
├── app/
│ ├── layout.tsx # Global layout
│ ├── page.tsx # Root page (/)
│ └── globals.css # Global styles
├── public/ # Static files (images, fonts)
│ └── logo.png
├── next.config.js # Next.js config
├── package.json
└── tsconfig.jsonCommon Pitfalls
Placing private utility files in the
public/directory (they will be publicly accessible).Naming routing files incorrectly (e.g., using
index.tsxinstead ofpage.tsxin the App Router).
Interview Questions
What is the purpose of the public directory in Next.js?
It is used to serve static assets like images, fonts, and robots.txt. Files here are mapped to the root URL (e.g., public/logo.png is accessible at /logo.png).
Real-World Example
Organizing a large project with custom components and utilities outside the app directory.
my-project/
├── app/ # Only routing-related files
│ └── page.tsx
├── components/ # Reusable UI components
│ └── Button.tsx
├── lib/ # Utility functions and DB connections
│ └── db.ts
└── public/
└── images/Check Your Knowledge
Test your understanding of Project Structure with these quick questions.