Next.js and the App Router

On Day 5 you added React Router to a Vite app. You wrote the list of routes yourself, chose a data library, and you would still need to pick a server, a build setup, and a host. Each of those choices is reasonable, but together they are a lot of setup before you build anything.

A framework makes those choices for you, so they work well together. Next.js is a React framework: you still write React components, and Next.js adds routing, server rendering, data loading on the server, and a production build. The App Router is the part of Next.js that turns the folders inside app/ into the pages of your site.

Create a Next.js appCopy Anchor Link

You need Node.js 20.9 or newer. Check with node -v.

npx create-next-app@latest reading-list-next --yes

cd reading-list-next
npm run dev

reading-list-next/
  app/
    layout.tsx     the root layout: the <html> and <body> for every page
    page.tsx       the home page, served at /
    globals.css    global styles
  public/          static files such as images, served as they are
  next.config.ts   Next.js settings
  package.json

The scripts in package.json work like the ones in your Vite app: npm run dev for development, npm run build for a production build, and npm start to run that build.

Folders become URLsCopy Anchor Link

In the App Router, file-system routing means the folder structure inside app/ is your list of routes. Each folder is one segment of the URL. A folder only becomes a page you can visit when it contains a page.tsx file.

A folder name in square brackets, like [id], is a dynamic segment. It matches any value in that position of the URL, and Next.js hands the value to your page as a param.

Next.js does this matching for you, so you never write it. To make the idea concrete, here is a toy version of the matching. Type different paths into the box and watch which file wins.

Try /, /about, /books, /books/dune, and /books/1/reviews. The last one has no matching file, so it is a 404.

Reading params in a dynamic routeCopy Anchor Link

Here is the Reading List detail page. The params prop holds the dynamic segments for this URL.

import { notFound } from 'next/navigation';
import { getBook } from '@/lib/books';

export default async function BookPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const book = await getBook(id);

  if (!book) {
    notFound();
  }

  return (
    <article>
      <h1>{book.title}</h1>
      <p>by {book.author}</p>
    </article>
  );
}

Three things here are new:

• The component is async. That is allowed for Server Components, which you meet properly in the next lesson.
• params is a Promise, so you await it before you read id.
• notFound() from next/navigation stops rendering and shows the 404 page. It never returns, so TypeScript knows book is defined after the if.

export default async function BookPage(props: PageProps<'/books/[id]'>) {
  const { id } = await props.params;
  // ...
}

Layouts wrap pagesCopy Anchor Link

A layout is a component that wraps every page below it in the folder tree. It receives the current page as children. The root layout, app/layout.tsx, is required and must render the <html> and <body> tags.

import type { Metadata } from 'next';
import Link from 'next/link';
import './globals.css';

export const metadata: Metadata = {
  title: 'My Reading List',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <header>
          <nav>
            <Link href="/">Reading List</Link>
          </nav>
        </header>
        <main>{children}</main>
      </body>
    </html>
  );
}

The exported metadata object sets the <title> and other tags in the page's <head>, so you do not need a library for it.

The useful part is what happens when you navigate. Next.js swaps the page inside the layout but keeps the layout itself mounted, so anything the layout holds survives the move. Here is the same idea in plain React. Type something into the header's search box, then switch pages.

The search text stays because only the children changed. A layout in a nested folder, like app/books/layout.tsx, wraps only the pages inside app/books/.

Moving between pages with LinkCopy Anchor Link

To go to another page, use the Link component from next/link. It renders a normal <a> tag, so it works with the keyboard, middle-click, and "open in new tab".

import Link from 'next/link';

export function BookCard({ book }: { book: Book }) {
  return (
    <h3>
      <Link href={`/books/${book.id}`}>{book.title}</Link>
    </h3>
  );
}

Link adds two things a plain <a> doesn't have:

• Client-side navigation: clicking it swaps the page without a full reload, so layouts and their state survive.
• Prefetching: when a link scrolls into view, Next.js starts loading that page in the background, so the click feels instant.

Use a plain <a> only for links that leave your site.

const files = [
  'app/page.tsx',
  'app/about/page.tsx',
  'app/books/page.tsx',
  'app/books/[id]/page.tsx',
  'app/authors/[slug]/page.tsx',
];

export default function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>A small app for tracking the books I want to read.</p>
    </>
  );
}

<nav>
  <Link href="/">Reading List</Link> <Link href="/about">About</Link>
</nav>