easyFrontend

What is not-found.js in Next.js and how do you trigger a 404?

Q: What is not-found.js in Next.js and how do you trigger a 404?

**TL;DR.** not-found.tsx renders the **404 UI** for a segment, and calling the ** notFound() ** function from a Server Component (e.g. when a record is missing) renders the nearest not-found boundary and returns a **404 status**. notFound() record missing not-found.tsx 404 UI + status <marker id='nb6' markerWidth='8' markerHeight='8' refX='6' refY='3' orient='aut

840 views

Understand the problem

Rendering 404 UI and the notFound() helper.

nextjsnot-found404routing

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

404 on a missing record

// app/blog/[slug]/page.tsx
import { notFound } from 'next/navigation';

export default async function Post({ params }) {
  const { slug } = await params;
  const post = await getPost(slug);
  if (!post) notFound();               // → renders not-found.tsx, sends 404
  return <article>{post.title}</article>;
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is Next.js and what problems does it solve?

What is the difference between the /public folder and imported assets in Next.js?