Soft 404 Errors in Next.js

Hassan Mubarak — Mon, 27 Jul 2026 00:05:26 +0000

Soft 404 Errors in Next.js: What They Are and How to Fix Them

By Hassan Mubarak

If Google Search Console has ever flagged pages on your site under "Soft 404," it can be a confusing warning. The page loads fine in your browser. Nothing looks broken. So why is Google saying it's a 404?

This guide explains what a soft 404 actually is, why it's worth fixing, and how to handle it in a Next.js application.

What Is a Soft 404?

A normal 404 happens when a server tells the browser "this page doesn't exist" using an HTTP 404 status code. A soft 404 happens when a page that should be treated as missing instead returns a 200 OK status, the server's way of saying "this page is fine" even though the page has little or no real content.

Search engines rely on status codes to understand what's actually on a site. When a broken or empty page reports itself as healthy, it creates a mismatch: the page exists in the index, but there's nothing meaningful for a visitor to find.

Why Soft 404s Happen in Next.js Specifically

Next.js makes it easy to build pages that pull content dynamically — from a CMS, an API, or a database. That flexibility is also where soft 404s tend to creep in. A dynamic route like /products/[slug] will render something even if the requested product no longer exists, because the page component still runs and returns a 200 status by default. Unless you explicitly tell Next.js "this content is missing, treat it as not found," the page will render an empty or broken-looking state while technically reporting success.

Common triggers:

A CMS entry or database record gets deleted, but the route that renders it doesn't check whether the data actually came back.
A dynamic page has a typo'd or outdated slug in its URL, and the page renders a blank or near-empty layout instead of erroring out.
Old static routes are removed from the site's navigation but the files (or generated paths) still exist and continue to serve.

Why It's Worth Fixing

Search engines waste crawl budget. Time spent re-crawling broken pages is time not spent indexing your real content.
Your site looks less reliable to search engines. A pattern of soft 404s can signal weak site health, which isn't a status you want attached to your domain.
Visitors land on dead ends. Someone clicking through from search results to an empty page is likely to bounce immediately, which hurts both user trust and engagement metrics.

How to Fix Soft 404s in Next.js

1 Explicitly trigger a "not found" state

The core fix is making sure a missing resource actually returns a not-found response instead of quietly rendering an empty page.

App Router: call notFound() from next/navigation inside your page component when the data you need isn't there:

import { notFound } from 'next/navigation';

export default async function ProductPage({ params }) {
  const product = await getProduct(params.slug);

  if (!product) {
    notFound(); // renders app/not-found.js and returns a 404 status
  }

  return <ProductDetails product={product} />;
}

Pages Router: return notFound: true from getStaticProps or getServerSideProps:

export async function getServerSideProps({ params }) {
  const product = await getProduct(params.slug);

  if (!product) {
    return { notFound: true };
  }

  return { props: { product } };
}

Both approaches tell Next.js to serve a real 404 status instead of a hollow 200.

2 Build a proper custom 404 page

A default 404 is fine functionally, but a custom one helps retain visitors who land on it. Add app/not-found.js (App Router) or pages/404.js (Pages Router) with a clear message, a link back to the homepage, and ideally a search box or links to popular content.

3 Clean up orphaned routes

If old static pages or generated paths are no longer linked anywhere on the site but still exist, either remove them or make sure they correctly return a 404/410 status rather than rendering leftover content.

4 Set up redirects for moved content

If a page has permanently moved rather than disappeared, use a 301 redirect (via next.config.js redirects or middleware) instead of letting it soft-404. This preserves any SEO value the old URL had and sends visitors to the right place.

5 Monitor for new occurrences

Soft 404s tend to reappear as content changes, new CMS entries get deleted, routes get restructured. Checking Google Search Console's Coverage report periodically (or running a crawler like Screaming Frog) helps catch new ones before they pile up.

Key Takeaway

The fix for a soft 404 always comes down to the same principle: if content is genuinely missing, the response needs to say so, not just visually, but in the actual status code the server returns. Next.js gives you the tools (notFound(), notFound: true, custom 404 pages, redirects) to do this cleanly; the main job is remembering to use them anywhere content is fetched dynamically.

DEV Community: Hassan Mubarak

Soft 404 Errors in Next.js