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.
Quick revision for interview day. Print it or save it as a PDF.

Folder conventions

app/ routes · page.tsx · layout.tsx · loading.tsx · error.tsx · not-found.tsx · route.ts (API) · [id] dynamic · [...slug] catch-all · (group) · _private · proxy.ts (middleware) · public/ static.

Components

Server by default (async, DB, secrets, zero JS) · "use client" for state/events · keep client components small · import "server-only" for DB code.

Rendering

Static + generateStaticParams · ISR revalidate · on-demand revalidatePath/Tag · dynamic per request · streaming Suspense · Cache Components "use cache" (16).

SQL Server

mssql pool on globalThis · Node runtime · env vars (no NEXT_PUBLIC_) · parameterised queries · or Prisma sqlserver · or call an ASP.NET Core API.

Deploy

Vercel (git push) · output: "standalone" for Docker/Azure/IIS (reverse proxy) · output: "export" for static sites.