Frontend engineering

Next.js, React and TypeScript in production. These notes cover caching, server components and actions, performance, and the patterns we keep.

32 articles

Start here

A thin upper lane of small tiles with a dashed empty outline in it, a curved arrow down to the same tile lit on a wide lower lane carrying a block of packages and a long bar

Web

Edge runtime vs Node runtime: Next.js 16 moved the default

Next.js 16 moved middleware to the Node runtime and renamed it proxy.ts. Where Edge still wins on latency, where Node wins on packages and long tasks.

Six staggered bars in a waterfall on a dark grid, five short and dark, one long and white running past a dashed vertical line to a page outline on the right

Web

Why is my website slow? The 6 causes and what fixes each

Only 48% of mobile sites pass Core Web Vitals. The six causes of a slow website, how to find yours in PageSpeed Insights, and what fixes each one.

A grid of twelve dark tiles with six lit white, each lit tile circled by a progress ring of a different length; three threads run from the right column of tiles to one lit pill on the right, and the middle tile of that column glows brighter with a full ring

Web

Next.js 16 caching explained: use cache, cacheLife and updateTag

In Next.js 16 nothing is cached until you write 'use cache'. How cacheLife's seven profiles, cacheTag and updateTag fit together, and where fetch stands now.

One white tile branching into hundreds of dark ones, four paths lit to the far edge

Web

npm dependency sprawl: the 4 costs on enterprise frontends

Sonatype logged 454,600 new malicious packages in 2025 and 99.8% of Q4 malware came from npm. What dependency sprawl costs, and the five controls we run.

A tree of tiles split by a dashed white line, dark tiles above and lit tiles below, six crossings of the line marked with rings

Web

React Server Components in production: 6 pitfalls to avoid in 2026

45% of React developers have shipped Server Components, yet they rank third-most-disliked in the State of React 2025. Six failure modes explain the gap.

A terminal window with one lit error line, wired from its edge to five dark tiles on the right: an error log, a route list, a component tree, a browser and a plug

Web

Next.js Agent DevTools: the AI debugging setup in 2026

Next.js 16.3 gives coding agents terminal access to build errors, routes and the React tree. The MCP and agent-browser setup, in five steps.

Five rows from button to server: three lit rows passing three lit check tiles each, two dim rows below with empty dashed slots going straight in

Web

Next.js Server Actions in production: patterns we use and avoid

Every Server Action you export is a public POST endpoint with no built-in auth. Here are the Next.js 16 patterns we ship and the ones we refuse.

On a white ground, a row of ten grey blocks above, and below it a single black block doing the same work with nine empty outlines after it

Web

TypeScript 7's Go compiler: what the 10x speedup changes

TypeScript 7 rewrites tsc in Go and type-checks the 1.5M-line VS Code repo in 7.5s instead of 78s. Here is what the 10x speedup changes for a dev team.

A solid grey page shell with three holes; one is filled white, and chunks of white stream from the right into the other two

Web

Partial Prerendering is stable in Next.js 16: how to structure routes

Next.js 16 makes Partial Prerendering stable via cacheComponents: a static shell from the CDN edge, dynamic parts streamed in the same response.

A white tile with a few neat lit dependencies, a bright vertical cut line, and beyond it a fading cloud of hundreds of grey specks

Web

npm dependency sprawl: the real cost and how to cut it in 2026

A fresh Next.js app pulls 1,000+ packages before any code. Here is what npm dependency sprawl costs in build time, bundle, and security, and how to cut it.

Five request bars sharing one prefix, the first fully lit and four as outlines lit only for a tenth of their length, streaming into an answer panel of token chips

Anthropic API in Next.js: streaming, caching, and cost control

Wire Claude into a Next.js app: a server-side route handler, SSE streaming, a cached prompt prefix at 10% of input cost, and retries that survive a 429.

Three address bars differing only in a lit first segment, joined by curves into one lit node, which feeds a stack of three identical page panels

Web

Next.js i18n without a library: the App Router pattern we ship

Next.js App Router ships no built-in i18n. We run three locales on native routing with zero i18n dependencies. Here is the exact production pattern.

Three stacked isometric plates, the top one lit with data dots, the middle one carrying branching routes, the bottom one striped, with two small plates beside them

Web

TanStack in 2026: Query, Router, Start, and what each one solves

TanStack Query passes 12M weekly downloads. The family now spans routing, tables, forms, and a full-stack framework. What each solves, and when to add it.

Left, three lit tiles each shown sliding, scaling and fading as faint copies; right, a glowing white wireframe surface of many points in a wave

Web

WebGL vs CSS animation: when to use each (2026)

CSS animates transform and opacity off the main thread for free. WebGL hands you the raw GPU. Here is the line between them, with the bundle and battery costs.

A scattered heap of grey files joined by lines into one lit file, which feeds a text panel whose lines sit exactly inside their dashed outlines

Web

Web font performance: one WOFF2 file, zero layout shift

An unoptimised family adds 500KB and delays readable text. Subset to WOFF2, self-host it, tune the fallback with size-adjust so nothing moves on swap.

A ring gauge lit for less than half its length, the rest broken into six dark segments, beside six lanes of tasks each with one long white block past a dashed limit

Web

6 frontend mistakes that tank your Lighthouse score in 2026

Total Blocking Time is 30% of the Lighthouse score, yet most teams fix the wrong metric. The six production mistakes that crater it, and how to fix each.

Sixty dim tiles in a wide grid on the left, and nine lit tiles packed into a container inside a small server panel on the right

Infra

Vercel vs Docker for Next.js: a $600 bill down to $90

A $600 Vercel bill drops to about $90 a month on a managed VPS with Docker. What you give up in edge, scaling and DX, and when the swap pays off.

A dark client tile and a lit server tile joined by one short white line between matching ports of small pills, with a dashed detour through three empty boxes above

Web

Type-safe RPC with Next.js Server Actions: skip the API layer

A Server Action is already an RPC. Here is how to make it type-safe end to end and validated at runtime, with no API route or response type to maintain.

One tall glowing white screen full of moving shapes beside a grid of nineteen identical grey document pages

Web

Website architecture in 2026: SPA homepage, static for the rest

Most marketing sites overengineer every page. We treat the homepage like an app and ship the other 95% as static docs, splitting the build target by intent.

Three closed white rings holding a large painted block, a pointer with a ripple, and stacked bars on their dashed outlines, each above a meter marked in its good zone

Web

Core Web Vitals on Next.js in 2026: how to ship green

Concrete steps to hit Good on LCP under 2.5s, INP under 200ms, and CLS under 0.1 on a Next.js 16 SaaS, plus how to read field data when Lighthouse lies.

An S-shaped easing curve with a tile repeated along it in fading copies, bunched at the ends; four lit tiles top left, three struck-through outlines bottom right, a scrollbar at the edge

Web

Immersive web stack in 2026: Lenis, GSAP, and what to skip

Lenis (3 kB), GSAP free since April 2025, ScrollTrigger for scroll math, and native CSS scroll-driven animations. The 2026 stack we ship in production.

On a white ground, nine black concentric rings around a black core, nine dark lines arriving from outside, each stopped at a different ring

Web

TypeScript strict mode: the 9 settings we never turn off

strict: true turns on 9 checks, and since TypeScript 6.0 it is the default. What each flag catches in production, plus the 3 flags outside the bundle we add.

Two lanes of weekly tile columns: above, six dashed empty weeks then a steady grey block three tiles high; below, lit columns starting at once and varying in height

Web

Next.js development agency vs in-house: when each one wins in 2026

A US senior Next.js hire costs $195,000 fully loaded and takes six weeks to find. Agency rates run $60 to $250 per hour. Here is how each one wins.

A brick wall of dark rounded bricks in which thirteen scattered bricks are lit white

Web

Next.js Server Actions security: 13 advisories and 2026 fixes

Next.js shipped 13 security advisories in 2026: middleware bypass, cache poisoning, and SSRF. What changed and how to ship Server Actions safely now.

A lit card at the centre, a cloud of tiny grey chips drifting away and fading to its left, and three clean lines on its right into three stacked white layers

Web

Why we removed Tailwind from production: a CSS-only design system

After years of running Tailwind alongside our own design system, we removed it from production. Here is the architecture that replaced it and what changed.

Three layers pulled apart in a stack; on the front one the same card appears wide in one container and stacked in a narrow lit one

Web

Modern CSS 2026: cascade layers, container queries, :has()

Cascade layers end specificity wars, container queries replace component media queries, and :has() ships in every major browser. What to adopt in 2026.

A balance on an open-A fulcrum, tipped: the lower pan holds a dense block of lit tiles, the raised pan a quiet page with two small lit islands

Web

Why we still pick Next.js over Astro for most SaaS in 2026

We have shipped both Next.js and Astro this year. For SaaS specifically, Next.js stays our default. Here is the honest tradeoff in 2026.

On a white ground, a grid of tiles swept by a black vertical line: black tiles with a white dot behind it, two dashed empty ones, one ringed, and grey tiles ahead

Web

React Compiler 1.0 directives: use memo and use no memo

React Compiler 1.0 memoizes most components at build time. Where the two directives apply, and where useMemo and useCallback still earn their place.

Three stacked bands: three lit tiles on top, six swatch pills in the middle and eighteen small chips at the bottom, each joined by lines to the one above

Design

Design tokens vs CSS variables vs Tailwind, explained (2026)

Design tokens, CSS variables, and Tailwind sit at three layers: meaning, runtime values, and utility classes. How to pick, and how they stack together.

A dark app window with a lit port on its right edge; a line from it passes a lit lock, with a stack of pills hung below, to a large lit tile; four dashed branches end in hollow rings

Next.js MCP server: mcp-handler, OAuth 2.1, Redis sessions

Mount an MCP server on a live Next.js 16 SaaS with mcp-handler: the dynamic transport route, OAuth 2.1, Redis session state, and 4 failure modes.

Five diamond shapes in a row joined by a line to a large dark tile, each with a branch down to a small tile; a white path runs through three diamonds and drops at the fourth to a lit tile

Web

Server Components vs Client Components: the decision tree we follow

The five-step decision tree we apply on every Next.js 16 project to decide when a component stays server-side and when it needs "use client".

A full wall of dark tiles split by three glowing white fault lines that step down through the gaps, the pieces between them slightly shifted

Web

Next.js 16 + React 19: the 3 changes that break old SaaS code

Turbopack is the default bundler, request APIs like params and cookies are now async, and React Compiler 1.0 is stable. What breaks moving a SaaS off Next 15.

Back to Field notes