One Project, Frontend and Backend: A Next.js App Router Todo Walkthrough

A React developer who has only worked with Vite SPAs and separate Node backends can absorb the full-stack shift in a single sitting — filesystem routing, server components, and co-located API handlers remove entire categories of glue code and deployment overhead.

App Router replaces manual route config with folder conventions: a `page.tsx` becomes a route, a `route.ts` inside `api/` becomes a backend endpoint. Components default to server-rendered for SEO and fast first paint; interactive pieces opt into the browser with `'use client'`. A complete Todo example wires a client-side page to in-memory CRUD handlers, surfacing the exact caching and request-header pitfalls that break the loop for newcomers.

The walkthrough covers the two rendering modes (CSR vs. SSR), the three-layer SEO model (metadata, body content, rendering strategy), and the mechanics of `force-dynamic`, `cache: "no-store"`, and `Content-Type` headers. It also contrasts two state-update strategies — optimistic local append versus a full re-fetch — and explains when each one silently fails.

Production readiness is flagged honestly: the in-memory array is a demo stand-in; real persistence demands Prisma + PostgreSQL. The closing roadmap points to Server Actions, dynamic routes, revalidation, and middleware as the natural next steps.