Topic 2 of 39
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
bash
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
Q:
What is the purpose of the
public directory in Next.js?A:
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.
example
bash
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.