Project Structure Tutorials

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)