Tutorials/NextJS/Getting Started
Lesson

Project Structure

Getting Started/NextJS
Previous TutorialsNext

Project Structure (Next.js)

This defines how your project files and folders are organized

Top-Level Folders

Used to organize code and assets:

  • app/ → App Router

  • pages/ → Pages Router

  • public/ → Static files (images, fonts)

  • src/ → Optional source folder

Top-Level Files

Important config files:

  • package.json → dependencies & scripts

  • next.config.js → Next.js config

  • .env → environment variables

  • tsconfig.json → TypeScript config

  • .gitignore → ignored files

🧭 Routing Files

Special files for routing:

FilePurposepage.tsxPage UIlayout.tsxShared layoutloading.tsxLoading UIerror.tsxError UIroute.tsAPI route

🔗 Nested Routes

Folder = URL path

plaintext
app/
 ├── page.tsx        → /
 ├── blog/
 │    └── page.tsx  → /blog

✔ Folders create routes automatically

🔄 Dynamic Routes

👉 Use [ ] for dynamic URLs:

plaintext
app/blog/[slug]/page.tsx

👉 Example:

plaintext
/blog/my-post

📦 Route Types

TypeExampleDynamic[slug]Catch-all[...slug]Optional[[...slug]]

🧩 Route Groups

👉 Organize folders without changing URL:

plaintext
app/(marketing)/page.tsx → /

✔ (folder) is NOT in URL

🔒 Private Folders

👉 Prefix _ to make non-routable:

plaintext
app/blog/_components/

✔ Used for:

  • Components

  • Utils

  • Internal logic

⚡ Special Routing Features

🔹 Parallel Routes

👉 Use @folder for multiple UI sections

🔹 Intercepted Routes

👉 Show one route inside another (like modal)

Component Hierarchy

👉 Rendering order:

plaintext
layout → template → error → loading → page

📁 Public Folder

👉 Static files:

plaintext
public/image.png → /image.png

📊 Metadata Files

SEO & icons:

  • favicon.ico

  • sitemap.xml

  • robots.txt

  • opengraph-image.png

🧩 Project Organization Strategies

You can organize in 3 ways:

1. Outside app/

  • Keep logic in root folders

2. Inside app/

  • Keep everything in app folder

3. Feature-based

  • Split by feature or route

🎯 Key Concepts

  • Folder = Route

  • page.tsx = public route

  • _folder = private

  • (folder) = group (no URL change)

Previous TutorialsNext