Removing p Tags from Contentful List Items
One 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.
Articles
Next.js, page 2 of 2
Next.js is an open‑source, React‑based web development framework by Vercel that enhances Node.js for creating fast, scalable web applications. It combines server‑side rendering (SSR) and static site generation (SSG) with dynamic routing, API routes, automatic code splitting, and support for React Hooks and TypeScript.
Below you will find a subset of articles from my blog specifically about Next.js. This is an area that I have worked with for many years, and have managed to write about quite a few times. There are twenty‑eight collected together for you below.
Removing p Tags from Contentful List Items. Removing
Image Optimisation with next/image. Image Optimisation with
next/image`next/image` explained 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.js`GetStaticPaths` in Next.js explained with dynamic routes, pre‑rendered paths, fallback behaviour, and how static generation works for slug‑based pages.
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.
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.
Dynamic Routes in Next.js. Dynamic Routes in Next.js
Dynamic routes in Next.js explained with `[slug]` pages, route params, nested segments, and why file‑based dynamic routing simplifies content‑driven sites.
Custom _app and Custom _document in Next.js. Custom
_appand Custom_documentin Next.jsCustom `_app` and `_document` in Next.js explained clearly, including shared layout, global setup, server‑rendered HTML, and what each file is actually for.
Using next/link for Client‑Side Navigation. Using
next/linkfor Client‑Side Navigation
Understanding File‑System Routing in Next.js. Understanding File‑System Routing in Next.js
File‑system routing in Next.js explained clearly, including the `pages` directory, nested routes, index files, and why routing feels simpler than custom setups.