Routing & Navigation

What this module covers

4 steps · Next.js

1. Step 1. Routing & Navigation

   File-based routing: app/ page.jsx -> / blog/ page.jsx -> /blog [slug]/ page.jsx -> /blog/:slug shop/ [...path]/ page.jsx -> /shop/a/b/c (catch-all) import Link from 'next/link'; <Link href="/about">About</Link> <Link href={`/blog/${post.slug}`}>{post.title}</Link> Dynamic params arrive as a prop: // app/blog/[slug]/page.jsx export default function Post({ params }) { return <h1>Post: {params.slug}</h1>; } // Client Components use useRouter from next/navigation 'use client'; const router = useRouter(); router.push('/dashboard');

   The square-bracket folder name and the params key must match exactly — a folder named [slug] always produces params.slug, never params.id or anything else. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Does Post read and display params.slug?

2. Step 2. Quiz: Routing & Navigation

   Answer these questions about dynamic routes and navigation.

   Square-bracket folders create dynamic segments; Link enables client-side, prefetched navigation; useRouter comes from next/navigation in App Router. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Answer the quiz below.

3. Step 3. Blog List with Dynamic Links

   Build a blog list page showing 5 posts, each linking to /blog/[slug] using the post's slug.

   Building the href from post.slug dynamically, rather than hardcoding each link, is what makes this scale to any number of posts without touching this component again. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Does each post render as a Link with an href built from its slug?

4. Step 4. Mini project: Routing & Navigation

   Build a blog list page showing 5 posts, each linking to /blog/[slug] using the post's slug. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   Building the href from post.slug dynamically, rather than hardcoding each link, is what makes this scale to any number of posts without touching this component again. This project stage asks you to apply the same idea without step-by-step scaffolding. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Does each post render as a Link with an href built from its slug?