NNext.js Feature Showcase

Next.js 14 · App Router · TypeScript

Next.js Feature Showcase

Each page demonstrates one Next.js feature running for real: how it renders, what to expect, and a live result.

Start with SSGSource on GitHub

The demos

Rendering

Static Site Generation

HTML built once at build time and served as a static file.

Rendering

Server-Side Rendering

Rendered on the server for every request, with live GitHub data.

Rendering

Incremental Static Regeneration

A static page that rebuilds itself in the background every 10 seconds.

Rendering

Streaming with Suspense

The page shell arrives at once; a slow part streams in after 3 seconds.

Routing

Dynamic Routes

One page file serves any /docs/[slug] address.

Server

Server Actions

A form that calls server code directly, with no API route.

Performance

Image Optimization

next/image resizes, compresses and lazy-loads images.

Server

Middleware

Code that runs before a request, here redirecting a blocked route.

Server

API Route

A route handler that returns JSON.

About this site

  • Built with Next.js 14 and Tailwind CSS.
  • Hosted on Google Cloud Run: a full Node.js server, so the dynamic features (SSR, ISR, server actions, middleware, API routes) all run. GitHub Pages can only host the static ones.
  • Code at github.com/wizzard262/next-js-features-demo

Still to add

Nested layouts · loading UI (loading.tsx) · error boundaries (error.tsx) · route groups · edge runtime · parallel and intercepting routes