Next.js foundations · Lesson 2 of 16

The App Router: folders are routes

page and layout, nested routes, Link, and route groups.

9 minutes3 games

Next.js has no routes config file. Each folder inside `app/` is a URL segment, and a folder containing page.tsx becomes a page people can visit.

app/
- layout.tsx → wraps every page
- page.tsx → /
- courses/
  - page.tsx → /courses
  - layout.tsx → wraps /courses/*
  - react/page.tsx → /courses/react
- (marketing)/about/page.tsx → /about
- _components/ → not a route

A folder in brackets (marketing) organizes files without appearing in the URL, and one starting with _ is excluded from routing.

TypeScript

// app/layout.tsx: the root layout, required, renders <html> and <body>
import type { ReactNode } from "react"
import Link from "next/link"

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <nav>
          <Link href="/">Home</Link> · <Link href="/courses">Courses</Link>
        </nav>
        {children}   {/* the current page goes here */}
      </body>
    </html>
  )
}

A layout wraps the pages below it and doesn't re-render when you navigate between them, so its state (like a sidebar input) is preserved. Layouts nest: app/layout.tsx wraps app/courses/layout.tsx, which wraps app/courses/react/page.tsx.

Order the lines

Order the layouts and page from outermost to innermost when opening /courses/react.

Click the lines in the right order

Quick question

You want a page at /settings/profile. Where does the file go?

Exercise

Write routeFor(file) that turns a file path into a URL the way Next.js does: drop app and page.tsx, and drop folders in brackets. Print the result for the three files in the code.

Expected output:

/
/courses/react
/about

JavaScript

function routeFor(file) {
  // "app/(marketing)/about/page.tsx" -> "/about"
  return file
}

console.log(routeFor("app/page.tsx"))
console.log(routeFor("app/courses/react/page.tsx"))
console.log(routeFor("app/(marketing)/about/page.tsx"))

Learn more from

Played 0 of 3 games

Next.js