Next.js

Deep dives into the Next.js ecosystem: App Router, server components, rendering strategies, and production architecture.

16 posts in this category.

A vast dark steampunk shipyard at dusk under amber sodium lamps and rolling neon teal fog, the massive hulking armored cargo freighter from before now half-dismantled in the background with its rusted iron hull plates being lifted away by clockwork cranes, while in the foreground the lean copper-plated cutter from before sits proudly at the dock with brass rigging gleaming and a single magenta steam engine humming, having taken over the route entirely; a brass ledger book rests open on a wet stone pier showing tally marks crossed out and replaced with smaller numbers, glowing teal data ribbons flow from the cutter's mast into the harbor's signal network, reflective wet stone dock with subtle circuit-pattern grouting glowing faintly blue, cinematic shallow depth of field, moody editorial composition, no text, no people

Astro Next.js Web Architecture Signal vs Noise

We Migrated Static Signal from Next.js to Astro. Here's What Actually Changed.

Last week we published the case for picking Astro over Next.js on content sites. Then we migrated this blog. One PR, half a working day, and a Lighthouse Performance score of 100 from a real production deploy — here are the honest numbers and what surprised us.

A vast dark steampunk harbor at night, with two cargo vessels docked side by side under amber sodium lamps and a low neon teal fog; the larger ship on the left is a hulking armored freighter packed with hundreds of identical sealed cargo containers stacked into a towering wall, its loading cranes idle and dim; the smaller ship on the right is a lean copper-plated cutter with only a handful of glowing crates strapped to its deck, brass rigging gleaming, a single small steam engine ticking over with a magenta flame, ready to sail, reflective wet stone dock between them with subtle circuit-pattern grouting glowing faintly blue, cinematic shallow depth of field, moody editorial composition, no text, no people

Static Architecture Next.js Web Architecture Signal vs Noise

When Astro Beats Next.js for Content Sites

Next.js is the default. It's also overkill for most content sites. Astro's island model ships less JS, builds faster, and lets you keep React where you actually need it.

A vast brass clockwork harvester with pneumatic tubes pulling streams of glowing data from distant API turbines into a central foundry, where mechanical arms press the data into stacks of crystalline static pages stamped with neon copper sigils, dark steampunk data refinery

Static Architecture Web Architecture Next.js Signal vs Noise

Build-Time Data Fetching Is the New SSR

If your data changes hourly and your traffic doesn't, server-side rendering is solving the wrong problem. Fetch at build time, ship static HTML, and let the CDN do the work.

A vast brass card-catalog cabinet in a dark steampunk archive, thousands of index drawers glowing with neon copper filaments, mechanical query arms converging on a single illuminated card while violet energy traces ripple along the cabinet seams

Static Architecture Signal vs Noise Developer Experience (DX) Next.js

Static-Site Search With Pagefind: You Don't Need Algolia

Algolia, Elastic, and Lunr earned their place when static sites couldn't search themselves. Pagefind changed that. Here's how to ship real search without a backend or a subscription.

A steampunk static crystal engine with small glowing satellites orbiting it representing edge functions

Web Architecture Next.js Static Architecture Cloud Platforms

When Static Isn't Enough: Adding Edge Functions Without Losing the Benefits

Static-first doesn't mean static-only. Here's how to add server-side logic at the edge without giving up the performance and simplicity you chose static for.

A vast brass darkroom filled with framed glowing rectangles being stamped into existence by clockwork arms, neon copper light pouring through translucent stencils, dark steampunk image foundry

Next.js Static Architecture Web Performance

OpenGraph Images at Build Time: Why Static Sites Win Social Cards

Generating social card images on demand from a serverless function feels modern. It's also slow, expensive, and fragile. Static sites can pre-render every OG image at build time, cache it forever, and never pay for it again.

A vast brass observatory with overlapping translucent panes of glass shifting between scenes, each pane revealing a different room frozen mid-morph, dark steampunk interior lit by neon copper filaments

Web Architecture Next.js Static Architecture

View Transitions Are Finally Usable

For a decade, smooth page transitions meant shipping a SPA router and giving up the simplicity of multi-page architecture. The View Transitions API ends that tradeoff — and it's finally supported everywhere that matters.

A massive brass magnifying glass hovering over a glowing sitemap carved into a dark metallic surface, with neon search-signal pulses radiating outward

Next.js Static Architecture Web Architecture

SEO Without a Plugin: How Static Sites Win at Search

Structured data, Open Graph, sitemaps, and RSS — all generated at build time, all under your control, and none of them require a plugin that phones home.

A mechanical assembly line of brass gears and neon conveyor belts compressing oversized photographs into razor-thin luminous strips against a dark industrial backdrop

Next.js Static Architecture Developer Experience (DX)

Image Optimization Is a Solved Problem (If Your Site Is Static)

Sharp at build time, next/image in static export, WebP/AVIF variants, blur placeholders, responsive srcset — image optimization used to be a manual chore. Now it's a build step.

A steampunk conveyor belt transporting glowing documents from a crumbling mechanical engine into a sleek crystalline machine

Wordpress Next.js Static Architecture Web Architecture

Migrating a WordPress Site to Next.js Static Export

You've decided WordPress isn't worth the maintenance anymore. Here's the full migration playbook — content extraction, markdown conversion, image handling, redirects, and deployment.

A glowing circuit conduit connecting server and client, representing a shared type-safe API layer

Next.js TypeScript Developer Experience (DX)

Building a Type-Safe API Layer in Next.js Without tRPC

tRPC is excellent. It's also overkill for most projects. Here's how to get type-safe API routes in Next.js using route handlers, Zod, and shared types — no extra dependencies required.

A steampunk clockface with brass gears and purple glass panels representing the passage of time with Next.js App Router

Next.js Signal vs Noise React Web Architecture

Next.js App Router: Two Years Later

The App Router shipped with promises of simpler data fetching, better performance, and a cleaner mental model. Two years of production projects later — here's the honest verdict.

Next.js Static Architecture TypeScript Headless CMS

Markdown-Driven Content: How to Build a Blog Without a CMS

No database. No admin panel. No plugin updates at 2am. Just files.

React Next.js Website Deploy to Render.com

Next.js Render.com Static Architecture

How to Deploy a Next.js Static Site to Render.com

Vercel is the obvious choice. Here's why you might not want it — and how to get the same result on Render with full control.

Automation Render.com Next.js Static Architecture

Automating Client Website Builds with n8n and Claude Code

A real look at the pipeline I built to take a client intake form and turn it into a deployed website — with minimal human involvement.

React Next.js Web Architecture

The Architecture of the Modern Web: How React and Next.js Became the Industry's Default Stack

From a Facebook experiment to the backbone of the internet — the story of two frameworks that rewired how developers think about building for the browser.