Practice & Assessment
Test your understanding of Routing, Navigation, and Dynamic Segments
Multiple Choice Questions
5You want to import useRouter for programmatic navigation in the App Router. Which import is correct?
What does wrapping a folder name in parentheses do in the App Router? (e.g., (marketing))
Where must middleware.ts be placed in a Next.js project?
You call notFound() inside a Server Component. What happens?
Which of the following is a valid use case for middleware.ts?
Coding Challenges
1Build a Filterable Product Catalog
Create a /products page that fetches an array of 10 hardcoded products (id, name, category: 'electronics'|'clothing'|'books', price). The page should read a category search param from the URL (/products?category=electronics) and filter the displayed products accordingly. Include a /products/[id] dynamic route that shows full product details. Add a not-found.tsx that renders a custom 404 message when an invalid ID is visited. No database needed — use a hardcoded array as your data source. Expected output: /products?category=books shows only books; /products/999 shows the custom 404. Time estimate: 20-25 minutes.
Mini Project
Documentation Site with Nested Navigation
Build a documentation site with the following routing structure: (public) route group with a marketing homepage and /pricing static page; (docs) route group with its own sidebar layout; /docs/[section]/[topic] dynamic route rendering hardcoded markdown-like content; search at /docs/search reading a q param and filtering topics; middleware that redirects /old-docs to /docs. The sidebar must use Link with active state styling (use usePathname from next/navigation in a Client Component). Include generateStaticParams for 5 pre-defined section/topic combinations. All data fetching must happen in Server Components.