DLDevLadder📒 My Notebook
Roadmap › 4. Frontend › Step 50
Nx

Next.js — App Router, Folder Structure, Rendering and Full Stack with SQL Server

What Next.js adds to React, the App Router folder structure with sample files for every special file (layout, page, loading, error, not-found, route handlers, middleware/proxy), Server vs Client Components, rendering strategies (static, dynamic, streaming, ISR, partial prerendering), data fetching and caching, Server Actions and forms, metadata and SEO, connecting to SQL Server from server code (mssql, Prisma), authentication, deployment to Vercel/Azure/IIS, the Pages Router for legacy apps, and Next.js interview questions.
What it is & where it is used

Next.js (by Vercel) is a React framework for full stack web apps. React is a UI library; Next.js adds everything around it: file-based routing, server rendering, data fetching, API endpoints, image/font optimisation, SEO metadata, bundling and deployment.

FeaturePlain React (Vite SPA)Next.js
RoutingAdd React RouterFile-system routing built in
RenderingClient-side onlyServer Components, SSR, static generation, streaming
SEOHard (empty HTML until JS runs)Full HTML from the server, metadata API
Backend codeSeparate API projectRoute handlers and Server Actions in the same project
Data accessAlways through an APIServer Components can query the database directly

DevLadder itself is built with Next.js (App Router, Server Components reading SQLite, static generation, sitemap and metadata).

Versions & history
VersionYearHighlights
1–82016–2019SSR for React, file routing (pages/), dynamic routes, API routes (9)
9.3 – 122020–2021getStaticProps/getServerSideProps, ISR, image component, middleware, Rust compiler (SWC)
132022App Router (app/) beta: layouts, Server Components, streaming; Turbopack alpha
13.42023App Router stable; Server Actions (alpha)
142023Server Actions stable, partial prerendering preview
152024React 19, async request APIs (await params), caching defaults changed (fetch no longer cached by default), Turbopack dev stable
162025Cache Components ("use cache") and PPR, Turbopack default for builds, middleware renamed to proxy, React Compiler support, next typegen
Lifecycle

What happens on a request to /products/42 (App Router):

  1. Request reaches the Next.js server (Node.js runtime, edge, or Vercel's infrastructure); proxy/middleware runs first (redirects, auth checks, rewrites).
  2. The router matches the URL to app/products/[id]/page.tsx and its parent layouts.
  3. Server Components render on the server: await params, fetch data (database, APIs) directly; the output is the RSC payload (a serialised component tree) and HTML.
  4. Static parts may come from the cache (prerendered at build or revalidated); dynamic parts stream in with Suspense boundaries (loading.tsx).
  5. The browser receives HTML immediately (fast first paint, SEO-friendly), then downloads JavaScript only for Client Components ("use client") and hydrates them to make them interactive.
  6. Navigations with <Link> fetch only the RSC payload for the new route (no full page reload); prefetching happens for links in view.
  7. Mutations go through Server Actions or route handlers; revalidatePath/revalidateTag/updateTag refresh cached data.
Tools used to develop
  • npx create-next-app@latest (TypeScript, ESLint, Tailwind, App Router, Turbopack options), next dev, next build, next start.
  • Vercel (hosting), @vercel/analytics, Next.js DevTools / React DevTools.
  • Data: Prisma, Drizzle, mssql, pg, @vercel/postgres/Neon, Supabase.
  • Auth: Auth.js (NextAuth), Clerk, Microsoft Entra ID (MSAL), custom JWT.
  • UI: Tailwind CSS, shadcn/ui, CSS Modules.
  • Testing: Vitest/Jest + React Testing Library, Playwright.