Stop 10 · Full-Stack FrameworksTopics · 1/7

Next.js App Router

Part of the Full Stack Developer Roadmap

In short

In Next.js, your folders are your URLs. Make a folder, drop a page.tsx in it, and you have a new route. No router config file, no extra library.

A React framework's file-system-based router built on Server Components — letting you build both your frontend UI and backend API routes in a single, unified codebase.

Think of it like this

A mall directory board

Ground floor, then the food court wing, then shop 12. Every shop's address comes from where it sits in the building. In the app/ folder, app/courses/mba/page.tsx lives at /courses/mba for the same reason.

Watch it happen

Folders become URLs

app/

layout.tsx

page.tsx

about/

page.tsx

courses/

page.tsx

mba/

page.tsx

1/4The root layout.tsx wraps every page in the app, so the navbar shows everywhere.

The big ideas

What you need to know

Folders make routes

Each folder inside app/ is a URL segment. A page.tsx file inside it makes that route visible.

Layouts wrap pages

layout.tsx wraps every page below it, like a shared navbar. It stays mounted when you move between pages.

Special files

loading.tsx shows while a page loads, error.tsx catches errors, not-found.tsx handles 404s for that section.

Server first

Every component in app/ is a Server Component by default. You opt into the browser with "use client".

See it in code

Walk through the code

tsx

1// app/layout.tsx  (wraps every page)2export default function RootLayout({ children }: { children: React.ReactNode }) {3  return (4    <html lang="en">5      <body>6        <nav>InsideEdge</nav>7        {children}8      </body>9    </html>10  );11}12 13// app/courses/page.tsx  ->  /courses14export default function CoursesPage() {15  return <h1>All courses</h1>;16}

1/3The root layout receives whichever page matches the URL as children.

The root layout must include html and body. Whatever page matches the URL gets slotted in where {children} sits.

Save yourself the pain

Common mistakes

Oops

Making app/about.tsx and expecting a page at /about.

Do this instead

Routes need a folder plus page.tsx: app/about/page.tsx.

Oops

Putting a navbar in every page file.

Do this instead

Put shared UI in layout.tsx once. Every page under that folder gets it for free.

Your mission

Map out a mini site

~20 min

Quick check

Which file creates the page at /blog/news?

Go deeper

1Convert a page from your earlier React app into a Next.js route.
2Learn the special files: `page.tsx`, `layout.tsx`, `loading.tsx`.
3Notice how this collapses the 'two separate codebases' full-stack model into one.