Extending the Boilerplate

This page is a map of the boilerplate’s extension points. Each section links to the dedicated guide with full instructions.

Field Patterns

Rather than repeating field definitions across collections, the boilerplate centralises common patterns in src/fields/. You spread or call them wherever they are needed.

Field	Purpose
`slugField`	Auto-generates URL-friendly slugs
`linkField`	Internal/external link groups
`imageUpload`	Pre-configured image uploads
`videoUpload`	Pre-configured video uploads

See Custom Fields for usage and how to create your own.

Blocks System

Each block is split across two files — a config that defines CMS fields and a React component that renders them. They connect through RenderBlocks, which maps each block’s slug to its component.

See Blocks System for step-by-step instructions.

Frontend Components

The boilerplate provides pre-built components for common rendering patterns:

PayloadImage

import PayloadImage from '@/components/payload-image/payload-image';

<PayloadImage
    src={doc.featuredImage}
    alt={doc.alt}
    fill
    className="featured-image"
/>;

Accepts a Media object, an ID, or undefined. Returns null if src is missing, so optional images are safe without extra null checks. Focal point values from focalX/focalY are applied automatically.

CMSLink

import CMSLink from '@/components/cms-link/cms-link';

<CMSLink link={doc.cta} className="custom-class" />;

Resolves internal links to their correct path (/posts/my-post) and passes external URLs through as-is. Returns null for broken or missing links — no empty anchors in the markup.

RichText

import RichText from '@/components/rich-text/rich-text';

<RichText data={doc.content} />;

Renders Lexical editor content with custom link handling baked in. Pass the raw data object from Payload — do not stringify it first.

Adding Collections

See the Collections Guide for step-by-step instructions on creating new content types.

Custom Fields — Reusable field patterns
Blocks — Creating content blocks
Collections — Adding new collections
SEO — Search engine optimisation