Week 3 — Next.js Getting Started

End-of-week mini-project · practice only

Next blog / dashboard shell

Host a small blog or dashboard in the Next App Router: layouts, Link nav, Server/Client boundaries, Nest-backed data with revalidation, image/font/metadata optimization.

Concepts covered this week

Install and run Next.js

Scaffold with create-next-app (App Router) and run the dev server.

Understand project structure

Organize routes under app/ with colocated components and route groups.

Layouts and pages

A root layout plus a nested section layout wrap the blog/dashboard pages.

Link and navigate

next/link nav with active styling and no full page reloads.

Server vs Client Components

Server components render the shell; a Client Component owns the interactive list/form.

Fetch data in Next.js

A Server Component fetches the feed from the Nest API.

Mutate data safely

A Server Action (or client mutation) forwards writes to Nest, which stays the API owner.

Understand caching

Choose force-cache vs no-store for the feed and justify the choice.

Revalidate stale data

revalidatePath/revalidateTag (or time-based) refreshes the list after a write.

Handle loading and errors

loading.tsx and error.tsx provide route-level boundaries.

Style Next.js applications

CSS Modules for components plus a small global stylesheet.

Optimize images

next/image renders cover images with sizing and lazy loading.

Optimize fonts

next/font loads a self-hosted font without layout shift.

Metadata & Open Graph

generateMetadata sets titles and an OG image on detail pages.

Route Handlers without replacing Nest

A thin route handler serves health/OG only; product CRUD stays on Nest.

Proxy carefully

Any proxy keeps auth cookies and avoids duplicating business logic.

Deploy & upgrade Next.js

A production build with deploy notes and the Next upgrade/codemod path.

Deliverables

• App Router routes: /blog + /blog/[slug] (or /dashboard + a detail route) with a root and nested layout
• A Server Component shell composing a Client Component list/form; providers only on the client subtree
• Nest-backed data via a server fetch; a Server Action (or client mutation) for writes with revalidation
• loading.tsx + error.tsx boundaries; next/image, next/font, and per-page metadata + OG
• At most a thin Route Handler for health/OG — no product CRUD in Next

Build guide

1. Scaffold + structurecreate-next-app, then lay out app/ routes with a root layout and a nested section layout.
2. Build navigationAdd next/link nav with active states between the list and detail routes.
3. Draw the boundaryKeep the page a Server Component and push interactivity into a Client Component leaf; place providers there.
4. Fetch from NestLoad the feed in the Server Component from the Nest API and pick a caching mode deliberately.
5. Mutate + revalidateSend writes to Nest via a Server Action or client mutation, then revalidate the list.
6. Add boundaries + metadataAdd loading.tsx/error.tsx and generateMetadata with an OG image on detail pages.
7. Optimize + shipSwap in next/image and next/font, run a production build, and note the deploy/upgrade steps.

Acceptance checklist

- [ ] use client only on interactive leaves + the providers module
- [ ] Data fetched in a Server Component; the write path revalidates the list
- [ ] Internal nav uses next/link; at least one dynamic segment
- [ ] loading.tsx + error.tsx boundaries present
- [ ] next/image + next/font + per-page metadata/OG in place
- [ ] Nest remains API owner (no product CRUD in Route Handlers)

Stretch goals

• Add tag/category filtering with searchParams-driven server fetching.
• Stream the slow part of the dashboard with Suspense.
• Generate dynamic OG images per post.

Tips

• Reuse Week 2 Query patterns inside Client Components — do not invent a second data layer.
• The official Learn Next.js path under /resources complements this brief.
• Keep secrets and JWT handling on Nest; the browser only sends cookies.