Next.js is a React framework adding the pieces a production app needs beyond bare React — routing, server-side rendering, static generation, API endpoints, image optimization, and a build/deploy pipeline, all with sensible defaults instead of hand-assembling them from separate libraries. Its core value proposition has stayed consistent even as the underlying implementation (Pages Router → App Router) changed significantly.

// Pages Router — re-runs on every request
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

// App Router — a Server Component fetches directly, no special export needed
export default async function Page() {
  const data = await fetchData();
  return <div>{data.title}</div>;
}

In the Pages Router, getServerSideProps runs on the server for every request and its returned props hydrate the page. In the App Router, Server Components fetch data directly inside the component itself (just an async function component) — Next.js decides whether to render it dynamically per-request or statically at build time based on how the data is fetched, without a separate special-named export.

In the Pages Router, every file under pages/ automatically becomes a route — pages/about.js is /about, pages/blog/[slug].js is a dynamic /blog/:slug route. The App Router replaces this with an app/ directory using folders (not files) as route segments, each containing a page.js — the same file-system-as-routing philosophy, restructured.

.js, .jsx, .ts, and .tsx — TypeScript support is built in with zero extra configuration; Next.js auto-detects a tsconfig.json (or creates one) and handles the compilation itself.

# .env.local
DATABASE_URL=postgres://...
NEXT_PUBLIC_API_URL=https://api.example.com

Variables in .env.local are available server-side automatically; only variables explicitly prefixed with NEXT_PUBLIC_ are also inlined into the client-side JS bundle at build time. This prefix requirement is a deliberate safety rail — it's much harder to accidentally leak a secret (a database URL, an API key) into the browser bundle than if all env vars were exposed by default.

In the Pages Router, a page with no getServerSideProps/getInitialProps is automatically pre-rendered to static HTML at build time — zero configuration required to get a fast, CDN-cacheable page. The App Router carries the same philosophy forward as its default: a route is statically rendered at build time unless something in it (a dynamic data fetch, force-dynamic) requires per-request rendering.