Understanding getStaticPaths in Next.js
`GetStaticPaths` in Next.js explained with dynamic routes, pre‑rendered paths, fallback behaviour, and how static generation works for slug‑based pages.
Articles
Development, page 17 of 24
Development is the broadest category in my writing, so it works as the main archive rather than a narrow subject label. It brings together implementation notes and technical decisions, with delivery lessons from across the rest of the site.
Understanding getStaticPaths in Next.js. Understanding
Using CSS to Deal with Widows. Using CSS to Deal with Widows
In typography, a 'widow' is the last line of a paragraph, which falls alone on the following page or column. On the web, this can be easily tackled with CSS.
Use Greater‑Than and Less‑Than Symbols in JSX. Use Greater‑Than and Less‑Than Symbols in JSX
Render greater‑than and less‑than symbols in JSX safely, using strings or HTML entities whilst avoiding parser confusion and awkward React output.
Using getStaticProps with CMS Data. Using
getStaticPropswith CMS DataUse getStaticProps with CMS data without hiding freshness, build‑time, preview and validation risks in Pages Router content workflows.
Reducing Image Brightness with CSS. Reducing Image Brightness with CSS
Reduce image brightness with CSS filters, including brightness(), animation, dark‑mode eye strain, visual treatment, and where filter effects are useful.
Commenting in JSX. Commenting in JSX
Comment in JSX without breaking React parsing, including curly‑brace block comments, why HTML comments fail, and gotchas around rendered output clearly.
GetStaticProps vs. getServerSideProps in Next.js. getStaticPropsvs.getServerSidePropsin Next.js`GetStaticProps` vs. `getServerSideProps` in Next.js explained with build‑time and request‑time data fetching, trade‑offs, and practical page examples.
Creating a Discernible Name for Icon Links. Creating a Discernible Name for Icon Links
A common issue I come across when auditing sites with Lighthouse is the "Links do not have a discernible name" error where links don't contain text.
Static Generation with CMS Content and Build‑Time Data. Static Generation with CMS Content and Build‑Time Data
How static generation works with CMS content and build‑time data, including routes, previews, rebuilds, freshness, cache limits, and deployment trade‑offs.
Interpolation: Sass Variables Inside calc(). Interpolation: Sass Variables Inside
calc()One of the most common pitfalls for developers new to Sass is string interpolation: why a Sass variable may not behave as expected inside calc().
Building Custom Hooks in React. Building Custom Hooks in React
Building custom hooks in React explained with reusable stateful logic, naming rules, composition examples, and why hooks share logic rather than state.
What is a Static Site Generator? What is a Static Site Generator?
Static site generators explained in plain English, including how they compare with SSR, ISR and modern framework rendering choices.
Deploying Static Front Ends with Netlify and Build Hooks. Deploying Static Front Ends with Netlify and Build Hooks
How Netlify build hooks deploy static front ends from CMS updates, scheduled changes, content edits, preview needs, and simple publishing workflows.
Static Generation vs. Server‑Side Rendering in Next.js. Static Generation vs. Server‑Side Rendering in Next.js
Compare static generation and server‑side rendering in Next.js through freshness, request‑time data, performance, SEO, operational cost, and page intent.
Redirect a Default Netlify Subdomain to Your Custom Domain. Redirect a Default Netlify Subdomain to Your Custom Domain
When you set up a custom domain in Netlify, the default `netlify.com` subdomain still returns your app, which can lead to duplicate content. It is an easy fix.
Break Out of CSS Nesting with Sass. Break Out of CSS Nesting with Sass
On the occasion that you need to break a single (or several) CSS rules out of the nested structure of your CSS, the Sass @at‑root rule is exactly what you need.
Advanced Sass: Loops. Advanced Sass: Loops
Use Sass loops more deliberately, including while, for, and each patterns, generated selectors, readable output, and where loops beat repetition.
Using Storybook to Document Front‑End Components. Using Storybook to Document Front‑End Components
How Storybook can document front‑end components, states, edge cases, accessibility checks, and design conversations outside the main application.
