How I structure React Next.js patterns across every client project
The React Next.js patterns I reuse on every project: server components by default, colocated data fetching, typed API boundaries, and error conventions.
Tag
React
10 posts
6 min read
The Next.js + React stack explained: what each layer does and when it's wrong
A practical guide to the Next React stack — React, Next.js, hosting, CMS, and styling — what each layer does, why this combination won, and when to walk away.
Tailwind CSS in 2026: what actually changed for teams
Tailwind CSS v4 rewired how teams configure, share, and ship styles. Here's what the CSS-first engine means in practice.
React 19 New Hooks in Next.js App Router: What Changed
How useFormStatus, useActionState, and use() from React 19 changed the way I build forms and async UI in Next.js App Router. Concrete before/after code.
Sanity Studio Custom Input Component: A Colour Picker
Step-by-step guide to building a Sanity Studio custom input component using definePlugin, useFormValue, and PatchEvent with a real colour-picker example.
Sanity Portable Text Custom Components in Next.js
Learn how to build Sanity Portable Text custom components in Next.js — code blocks, callouts, embedded forms, and captioned images with full TypeScript types.
Next.js App Router Tutorial 2026: Pages Router to Production
A practical Next.js App Router tutorial guide for 2026. Covers layouts, route groups, Server Components, data fetching, static export, and the metadata API.
GROQ Conditional Projections: Cut Query Payload by 60%
A pattern for projecting only the fields your Next.js components actually render, using GROQ's select() and type filters to prune unused blocks from a union array.
Avoiding N+1 Queries: Modeling Sanity References in RSC
A pattern for structuring Sanity references and GROQ projections that eliminates query waterfalls in server components, cutting fetch latency by 200–400 ms.
INP for React Apps: Profiling and Eliminating Long Tasks
INP is responsiveness. Learn how to find long tasks, profile React re-renders, reduce main-thread work, and ship fast interactions consistently.