Next.js
/Beginner
Project Structure
Definition
The standard, opinionated directory layout of a modern Next.js (App Router) application.
Explain Like I'm New
Unlike React where you can put files anywhere, Next.js expects specific files in specific places. The `app` folder is the heart of your application. Inside it, `page.tsx` defines UI, `layout.tsx` defines wrappers, and folders define routes.
Real World Example
If you want a route called `/dashboard/settings`, you must create a folder called `dashboard`, inside it a folder called `settings`, and inside that a file exactly named `page.tsx`.
Common Use Cases
- •Organizing codebases
- •Team collaboration standards
Terminal Output
bash / terminal
/*
A standard Next.js App Router Structure:
my-app/
├── next.config.js # Global configuration
├── package.json # Dependencies
├── public/ # Static assets (images, fonts)
│ └── logo.svg # Accessed via /logo.svg
└── app/ # The core application
├── layout.tsx # Global layout (HTML, Body tags)
├── page.tsx # The Home page (/)
├── globals.css # Global CSS/Tailwind imports
└── dashboard/
├── layout.tsx # Dashboard-specific layout (Sidebar)
└── page.tsx # Dashboard home page (/dashboard)
*/
Interview Questions
basic
- What is the most important top-level directory in a modern Next.js 13+ project?
intermediate
- What is the difference between `page.tsx` and `layout.tsx`?