Next.js

Contents

Quick Snapshot

Type: React-based web framework for building full-stack applications.
Created by: Guillermo Rauch and the team at Vercel (formerly ZEIT).
First released: 2016.
Core idea: Combine the developer experience of React with built-in performance, routing, and deployment features.
Use cases: Everything from landing pages to dynamic, production-grade apps — all powered by JavaScript (or TypeScript, if you’re feeling classy).
Website: nextjs.org

A Brief History

Next.js was introduced in 2016 as a simple layer on top of React for server-side rendering (SSR).
Over time, it evolved into a full-featured framework supporting static site generation (SSG), API routes, Edge rendering, and incremental adoption for any React app.

Each version since has added more power:

v1 (2016): “Universal JavaScript” — render React on both client and server.
v9 (2019): Added API routes and automatic static optimization.
v12–13: Introduced the App Router, React Server Components, and streaming.
v14+: Focus on performance, caching, and seamless deployment on the edge.

The Core Concept

Next.js is built on the idea of a hybrid rendering model:

Static Rendering: Prebuild pages at compile time for speed.
Server Rendering: Generate content on request for freshness.
Incremental Static Regeneration (ISR): Rebuild pages behind the scenes as data changes.

In short: you can decide when and where a page gets rendered — and Next.js will just handle it.

File-Based Routing

Forget complex route configs — the file system is your API:

/pages
  index.js        →  /
  about.js        →  /about
  blog/[slug].js  →  /blog/:slug

Dynamic segments ([param]) and nested routes are handled automatically.
The newer App Router (introduced in Next.js 13) lives under /app and embraces React Server Components.

Rendering Modes

Next.js supports several rendering strategies:

SSR (Server-Side Rendering): Pages rendered on-demand.
SSG (Static Site Generation): Pre-rendered pages served via CDN.
ISR (Incremental Static Regeneration): Static pages updated periodically without rebuilding everything.
CSR (Client-Side Rendering): For full SPA behavior when needed.

Data Fetching

Depending on the router version, data fetching can look like:

Pages Router (legacy):

export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return { props: { data } };
}

App Router (modern):

export default async function Page() {
  const data = await fetch("https://api.example.com/data").then(res => res.json());
  return <div>{data.message}</div>;
}

You can fetch data at build time, per request, or stream it as it loads.

Styling & Assets

Next.js doesn’t dictate your fashion sense, but supports all styles:

CSS Modules (built-in)
Tailwind CSS (fan favorite)
Styled Components / Emotion
Sass / PostCSS
Global CSS imports via _app.js

For static assets, just drop them in /public and reference directly:

<img src="/logo.png" alt="Logo" />

API Routes

Next.js turns /pages/api into serverless endpoints:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: "Hello from the API!" });
}

Perfect for small APIs, webhooks, or anything you don’t want to host elsewhere.

Deployment

Next.js was built hand-in-hand with Vercel, which makes deployment a one-command affair:

vercel deploy

Still, you can deploy anywhere: AWS, Netlify, Cloudflare, Docker, or your own Node server.
Vercel’s platform just gives you built-in optimizations for caching, edge rendering, and previews.

Features You’ll Love

🔁 Hot Reloading — Instant feedback during development.
⚡ Automatic Code Splitting — Only load what’s needed.
🧭 Built-in Routing — No need for React Router.
📦 API Routes — Full-stack capabilities out of the box.
🧱 Static Exports — Use it like a static site generator.
🌍 i18n — Internationalization baked in.
🧠 TypeScript Ready — First-class support.
🕹️ Edge & Middleware — For custom caching, redirects, and access control.

Ecosystem

Framework integrations: Works seamlessly with React libraries like Redux, TanStack Query, and Zustand.
CMS options: Headless CMSs like Sanity, Contentful, and Strapi love it.
Database connections: Use Prisma, PlanetScale, Supabase, or any ORM of choice.
Analytics & monitoring: Built-in support for Vercel Analytics and OpenTelemetry.

Example Project

npx create-next-app@latest my-app
cd my-app
npm run dev

Then open http://localhost:3000 — your app is already running with live reload, routing, and linting configured.
Just start building.

Fun Facts

Built by the same folks who gave us Vercel, known for pushing the “developer experience” movement forward.
Next.js popularized hybrid rendering long before the buzzword “Edge Functions” became trendy.
The mascot is a triangle — possibly representing performance, simplicity, and deployment (or maybe it just looked cool).
StableWiki Engine, the backbone of SidWiki is built with Next.js.