When Production Data Breaks a Next.js Site

Hero image for When Production Data Breaks a Next.js Site. Image by Carson Masterson.
Hero image for 'When Production Data Breaks a Next.js Site.' Image by Carson Masterson.

In Brief

Production content should be treated like an external API. Real CMS data includes missing fields, unpublished references, odd slugs, large collections, unsupported rich text, awkward dates, and image gaps that tidy local fixtures rarely cover. The fix is validation and graceful failure before data reaches rendering templates.

Local fixtures are usually polite. Production data is not.

Production data has missing fields, old slugs, unpublished references, odd dates, empty arrays, rich text shapes nobody tested, images without dimensions, duplicate titles, and content written before the current component model existed.

That is why a Next.js site can pass local checks and still fail during build, static generation, preview, or runtime rendering. The code may be technically correct for the data the developer imagined. Production simply disagrees.

If the failure appears during deployment, start with the narrower checks in Next.js build failing on Vercel. If the site is alive but serving stale content, content not updating from the CMS is the closer debugging path.


Treat Content as an External API

A CMS is not just an admin UI. For the frontend, it is an external API with contracts, versions, missing values, and failure modes.

That means the app should be clear about:

  • required fields
  • optional fields
  • fallback behaviour
  • allowed rich text nodes
  • allowed references
  • slug rules
  • image requirements
  • date requirements
  • category and tag rules
  • publication state

If those rules only exist in component assumptions, they will eventually break.

Headless CMS work is especially exposed here because editors can often create combinations developers did not expect. That flexibility is useful, but it needs validation.


Missing Fields Should Fail in the Right Place

Not every missing field should crash a route.

Classify fields:

  • required to publish
  • required to render a specific component
  • optional with visible fallback
  • optional and hidden when absent
  • deprecated but still supported

For example, a service page without a title should not publish. A testimonial without a role might still render. A card without an image might need a different layout. A missing related article should not crash the whole page.

The important thing is to decide these behaviours before production content chooses for you.


Slugs and Routes Need Validation

Slugs are a common source of build and routing problems.

Check for:

  • duplicate slugs
  • uppercase characters
  • unsupported punctuation
  • leading or trailing spaces
  • changed slugs without redirects
  • slugs that collide with reserved routes
  • locale or market collisions
  • generated route paths missing from sitemaps

If the app statically generates routes, slug problems can break the build or create missing pages. If the app renders dynamically, slug problems can create 404s, duplicate content, or canonical confusion.

Slug validation belongs close to the content workflow, not only in a production build error.


Images are Data Too

Image problems often surface late.

Examples:

  • missing asset
  • missing dimensions
  • missing alt text
  • unsupported format
  • huge original file
  • broken remote URL
  • focal point missing
  • transparent image on wrong background
  • image intended for one crop used in another

If image dimensions are needed for layout stability, treat them as required data. If alt text is needed for meaningful images, make the field visible in the editorial workflow. If a component requires a specific aspect ratio, enforce it before release.

Otherwise, production content will eventually break layout, performance, or accessibility.


Rich Text Needs a Supported Node List

Rich text is where content models become code.

Check which nodes are supported:

  • headings
  • paragraphs
  • lists
  • tables
  • links
  • embedded entries
  • embedded assets
  • code blocks
  • quotes
  • iframes
  • videos

Unsupported rich text should not fail silently. It should either render safely, be blocked at publish time, or produce a clear editorial warning.

This matters when migrating CMSes. A Contentful rich text document, WordPress block, Sanity portable text array, and Markdown file do not have the same shape. Copying content across without mapping supported nodes creates fragile templates.


Relations and References Need Publication Rules

Unpublished references are a classic production failure.

A page may link to:

  • related articles
  • authors
  • categories
  • services
  • case studies
  • products
  • images
  • navigation entries
  • reusable modules

If a related entry is unpublished, deleted, or excluded by locale, what should happen?

Possible answers:

  • block publication
  • hide the related item
  • show fallback copy
  • route to a draft preview only
  • fail build with a clear error

Pick one. Do not let null reference errors become the first time the team discusses the rule.


Dates and Scheduling Need Care

Published, updated, scheduled, and expiry dates can affect:

  • article ordering
  • sitemap inclusion
  • schema
  • homepage modules
  • category pages
  • RSS feeds
  • generated policy files
  • cache invalidation

Futuredated content is not wrong. It just needs consistent rules. A scheduled article may be present in the CMS, absent from the public route list, visible in preview, and included in generated data only after the next production build.

Those rules should be tested because date bugs can look like missing content, stale content, or accidental publication.


Validate Data Before It Reaches Templates

The healthiest pattern is to normalise data at the boundary.

That might mean:

  • schema validation
  • typed mapper functions
  • explicit null handling
  • route generation checks
  • content model tests
  • CMS preflight scripts
  • warnings for optional quality issues
  • hard failures for unsafe publish states

Do not spread CMS response handling throughout components. Components should receive data in the shape they are designed to render.


Wrapping Up

Production data breaks Next.js sites when the content contract is implicit.

The fix is not to make every component endlessly defensive. The fix is to decide which fields are required, validate slugs and references, support rich text deliberately, treat images as structured data, and normalise CMS responses before they reach templates.

Production content will always be messier than local fixtures. A mature platform expects that.

Key Takeaways

  • Treat CMS content as an external API with contracts and failure modes.
  • Classify fields as required, optional, fallback, or deprecated.
  • Validate slugs, routes, images, references, and dates before release.
  • Support rich text nodes deliberately and warn on unsupported content.
  • Decide how unpublished references should behave.
  • Normalise CMS data at the boundary instead of inside every component.

Planning a platform change?

I help teams make difficult platform work clearer, from architecture decisions and migrations to launch recovery, performance, and search visibility.