Episode 2 — React Frontend Architecture NextJS / 2.18 — Getting Started with NextJS

2.18 — Exercise Questions: Getting Started with Next.js

<< 2.18 Overview

A. Scaffold & tooling (2.18.c)

  1. Run create-next-app with TypeScript and ESLint; delete demo content; commit a clean main with README describing scripts.
  2. Add .nvmrc (or engines in package.json) matching your CI Node version.
  3. Add npm run typecheck if not present (tsc --noEmit) and wire it in CI.

B. Routing (2.18.d)

  1. Create app/(site)/page.tsx and app/(site)/pricing/page.tsx; confirm URLs have no (site) segment.
  2. Add app/items/[id]/page.tsx; log resolved id; return notFound() when id fails a Zod UUID parse.
  3. Add middleware.ts that redirects /old → /new with a 307.
  4. Add app/docs/[[...slug]]/page.tsx and verify both /docs and /docs/a/b resolve; log the slug array.

C. Layouts & metadata (2.18.e)

  1. Create app/dashboard/layout.tsx with a sidebar; add dashboard/invoices/page.tsx and dashboard/settings/page.tsx; verify sidebar persists on client navigation via <Link>.
  2. Add app/dashboard/template.tsx with a useEffect mount logger; compare logs vs layout-only behavior.
  3. Move shared metadata to app/layout.tsx using export const metadata; override title in one child page using export const metadata or generateMetadata (pick one pattern and justify).

D. Framework vs “why Next” reflection (2.18.a, 2.18.b)

  1. In five bullet points, explain why a startup might still pick plain Vite + React instead of Next for their first web app.
  2. Write a one-page ADR: “App Router vs Pages Router for this repo” with decision, consequences, and review date.

Answers & guidance (self-check)

1–3. Scaffold & tooling

  • 1: You should have package.json scripts documented (dev, build, start, lint). README states Node version expectations.
  • 2: .nvmrc (example content: 20) or "engines": { "node": ">=20" } prevents “works on my machine” vs CI drift.
  • 3: "typecheck": "tsc --noEmit" catches type errors that ESLint might miss; CI should run lint + typecheck + build on PRs.

4. Route groups

  • Visiting / and /pricing should work. The (site) folder is organizational only; next build output should list those routes without (site) in the path.

5. Dynamic [id] + Zod

  • Parse with z.string().uuid(); on failure call notFound() from next/navigation so Next renders the not-found boundary instead of throwing an unhandled 500 for bad input.

6. Middleware redirect

  • NextResponse.redirect(new URL('/new', request.url), 307) preserves method for non-GET flows; use 308 if you require strict permanent semantics per HTTP needs.

7. Optional catch-all

  • params.slug is undefined for /docs and an array for nested paths. Log to verify; handle both branches in UI.

8. Dashboard layout persistence

  • Layout state (sidebar open/closed if stored in layout-level client component) persists across child navigations because the layout component identity is stable.

9. Template remount

  • You should see mount logs on every navigation between invoices/settings when template.tsx wraps the segment; with layout-only, child remount behavior differs—templates reset subtree state by design.

10. Metadata

  • Root: site-wide defaults. Child: export metadata with title: { absolute: '...' } or template pattern per docs. Use generateMetadata when values depend on async data.

11. When Vite + React might win

  • Examples: purely static marketing with no SSR requirement; team allergic to server ops; embed/widget; existing design system docs site; edge deployment to static host only; very simple SPA with no SEO needs.

12. ADR

  • Same rubric as 2.17: context, decision, alternatives (Pages Router), consequences (migration cost, ecosystem plugins), review date.

<< 2.18 Overview