Building a Headless CMS‑Powered Site with Next.js
Build a headless CMS‑powered Next.js site with content modelling, fetch layers, mapped front‑end data, preview support, and scalable rendering choices.
Articles
Next.js, page 3 of 4
Next.js turns React into a full web platform, which means framework choices soon become architecture and operational choices. These articles cover how rendering and routing decisions carry into migration and deployment work, including the production cases where the framework's convenient default is not the right boundary.
Building a Headless CMS‑Powered Site with Next.js. 
Building Multi‑Tenant Applications with Next.js. Building Multi‑Tenant Applications with Next.js
Multi‑tenant applications serve multiple customers from a single codebase. Here, I walk through building a scalable multi‑tenant web application using Next.js.
From Netlify Deploys to Vercel Pipelines. From Netlify Deploys to Vercel Pipelines
How deployment expectations moved from simple Netlify static deploys towards Vercel pipelines, previews, framework builds, observability, and rollback.
Redirect a Default Vercel Subdomain to Your Custom Domain. Redirect a Default Vercel Subdomain to Your Custom Domain
When you set up a custom domain in Vercel, the default
vercel.appsubdomain still serves your site, which can lead to duplicate content. Here's how to fix it.
Using Next.js Proxy for Route Protection. Using Next.js Proxy for Route Protection
Protect Next.js routes with Proxy, formerly Middleware, using authentication, authorisation, matchers, API request checks and current terminology.
When Static Generation Stopped Being Simple. When Static Generation Stopped Being Simple
Why static generation became more complex as CMS previews, ISR, cache invalidation, build queues, e‑commerce data, and platform expectations grew.
Next.js vs. Remix: Understanding the Key Differences. Next.js vs. Remix: Understanding the Key Differences
Next.js vs. Remix compared properly, across routing, data loading, mutations, caching, and the architectural trade‑offs teams actually feel in production.
Caching Strategies for Data Fetching in Next.js. Caching Strategies for Data Fetching in Next.js
Caching strategies for data fetching in Next.js, including force‑cache, revalidation, stale data trade‑offs, and the debugging traps teams hit in production.
Access Search Parameters in Next.js SSR'd Layout. Access Search Parameters in Next.js SSR'd Layout
Whilst replatforming an app, I came across this limitation in Next.js: you cannot (easily) access search parameters in an SSR layout. Here, I share my solution.
Implementing Authentication in Next.js Using NextAuth.js. Implementing Authentication in Next.js Using NextAuth.js
A practical guide to implementing authentication in Next.js with NextAuth.js, including sessions, callbacks, route protection, and router‑specific trade‑offs.
All About Headless CMSes. All About Headless CMSes
What headless CMSes are, how API‑first content supports multiple front ends, who benefits, and the trade‑offs between several popular platforms.
ReferenceError: Window is Not Defined in Gatsby. ReferenceError: Window is Not Defined in GatsbyFix window is not defined in Gatsby or Next.js by understanding SSR, guarding browser globals, lifecycle timing, dynamic imports, and third‑party modules.
Incremental Static Regeneration and CMS Publishing Freshness. Incremental Static Regeneration and CMS Publishing Freshness
How Incremental Static Regeneration affects CMS publishing freshness, including rebuild timing, stale pages, previews, and editorial expectations.
Preview Mode in Next.js with a Headless CMS. Preview Mode in Next.js with a Headless CMS
Preview Mode in Next.js explained with a headless CMS, draft content workflows, preview cookies, and how editors can see unpublished pages safely.
Removing p Tags from Contentful List Items. Removing
pTags from Contentful List ItemsOne of the quirks of rendering Rich Text from Contentful is that list items come wrapped in paragraph <p> tags. Fortunately, this is a simple one to resolve.
Image Optimisation with next/image. Image Optimisation with
next/imagenext/imageexplained with responsive sizing, lazy loading, layout shift reduction, and why image optimisation matters in real Next.js applications.
Dynamic Imports and Code Splitting in Next.js. Dynamic Imports and Code Splitting in Next.js
Dynamic imports and code splitting in Next.js explained with
next/dynamic, lazy‑loaded components, SSR trade‑offs, and when splitting really helps.
Understanding getStaticPaths in Next.js. Understanding
getStaticPathsin Next.jsgetStaticPathsin Next.js explained with dynamic routes, pre‑rendered paths, fallback behaviour, and how static generation works for slug‑based pages.
