Chapter 02 — Setup & the App Router Project Structure

Chapter 02 — Setup & the App Router Project Structure

Hey everyone! Welcome back. Today we set up a real Next.js project and — more importantly — learn to read the folder structure. Once this clicks, every future chapter makes sense instantly, because Next.js is largely "put the right file in the right folder."

What we will cover:

• Creating a new Next.js project
• The App Router folder structure, piece by piece
• Special files Next.js recognizes automatically
• The public folder and static assets
• App Router vs Pages Router (which one to learn)

---

1. Creating a Project

npx create-next-app@latest my-app

You'll be asked a few questions:
─────────────────────────────────
✔ TypeScript?           → Yes/No (No is fine to start)
✔ ESLint?                → Yes
✔ Tailwind CSS?          → Your choice
✔ src/ directory?        → Your choice (keeps app/ inside src/)
✔ App Router?            → YES (this is what we're learning — the modern default)
✔ Import alias?          → default @/* is fine

cd my-app
npm run dev
→ http://localhost:3000

2. The Folder Structure — What Actually Matters

my-app/
├── app/                  ← THE MAIN FOLDER. This is your app.
│   ├── layout.js         ← root layout, wraps EVERY page
│   ├── page.js           ← the homepage ("/")
│   ├── globals.css
│   ├── about/
│   │   └── page.js       ← becomes route "/about"
│   └── blog/
│       ├── page.js       ← becomes route "/blog"
│       └── [slug]/
│           └── page.js   ← becomes route "/blog/:slug" (dynamic)
│
├── public/               ← static files, served as-is from "/"
│   └── logo.png          ← accessible at yoursite.com/logo.png
│
├── next.config.js        ← framework configuration
├── package.json
└── node_modules/

The single biggest idea here: the folder path becomes the URL path. No route config file, no <Route path="/about"> to write by hand. A folder named about containing a page.js IS the /about route.

3. Special Files Next.js Recognizes

Inside any folder in app/, certain filenames trigger special behavior automatically. We'll go deep into most of these in later chapters — here's the map:

File	What it does
page.js	Makes this folder a visitable route. No page.js = no route, even if the folder exists.
layout.js	Shared UI that wraps this folder's page(s) AND all nested routes.
loading.js	Automatic loading UI shown while this route's data is being fetched.
error.js	Automatic error boundary for this route.
not-found.js	Shown when notFound() is called or a route doesn't match.
route.js	Turns this folder into an API endpoint instead of a page (Route Handler).
template.js	Like layout, but re-mounts on every navigation (rare, special cases).

Important: only files, folders don't automatically become routes!
====================================================================
app/
└── dashboard/          ← this folder alone does NOTHING
    └── settings/       ← neither does this
        └── page.js     ← THIS is what makes "/dashboard/settings" real

You can nest folders purely for organization (components, helpers)
without accidentally creating routes — as long as there's no page.js.

4. Route Groups & Private Folders (Organizing Without Affecting URLs)

Route Groups — folder name in parentheses, doesn't appear in the URL:
========================================================================
app/
├── (marketing)/
│   ├── about/page.js       → still just "/about"
│   └── pricing/page.js     → still just "/pricing"
└── (shop)/
    └── cart/page.js        → still just "/cart"

Useful for: giving "(marketing)" and "(shop)" their OWN layout.js,
without that grouping leaking into the URL.

Private folders — underscore prefix, Next.js ignores it for routing:
========================================================================
app/
└── _components/
    └── Button.js            → NOT a route, safe place for shared code

5. The public Folder

Anything in public/ is served exactly as-is, from the root URL. No import needed — reference it by path directly:

public/
└── logo.png

// in your component:
<img src="/logo.png" />    ← note: NOT "/public/logo.png"

6. App Router vs Pages Router

You'll see older tutorials mention a pages/ folder instead of app/. That's the Pages Router — the original Next.js routing system.

Pages Router (legacy, pre-2023):        App Router (modern, what we teach):
==================================      =====================================
pages/about.js → "/about"               app/about/page.js → "/about"
getServerSideProps() for data           Server Components fetch data directly
No layouts nesting built-in             Nested layouts built-in
Everything is a Client Component        Server Components by default

Still supported, still works in production — but all new features
(Server Components, Server Actions, streaming) are App Router only.
Learn App Router. That's this entire series.

Key Points to Remember

• The folder path = the URL path — that's the entire routing model
• A folder only becomes a real route if it contains a page.js
• Special files (layout, loading, error, route) trigger automatic framework behavior
• Route groups (name) organize/scope layouts without touching the URL
• Private folders _name hold shared code without becoming routes
• public/ files are served as-is from the site root
• We are learning the App Router — it's the modern, actively developed system

What's Next?

Next chapter, we go deeper into routing itself — dynamic routes, catch-all routes, and how nested folders build up a URL step by step.

Keep coding, keep learning! See you in the next one!