Not Found

1
import { notFound } from 'next/navigation';
2

3
export default async function BlogPost({
4
  params,
5
}: {
6
  params: Promise<{ slug: string }>;
7
}) {
8
  const { slug } = await params;
9
  const post = await getPost(slug);
10

11
  if (!post) {
12
    notFound();
13
  }
14

15
  return <Article post={post} />;
16
}

1
export default function NotFound() {
2
  return (
3
    <div>
4
      <h2>Post Not Found</h2>
5
      // !mark
6
      <Link href="/blog">Browse all posts</Link>
7
    </div>
8
  );
9
}

Demo

1. Visit a non-existent category: /not-found/does-not-exist
2. Visit a non-existent sub-category: /not-found/electronics/does-not-exist
3. Notice the different fallback UI based on where not-found.tsx is placed.

Visual Summary

Key Takeaways

Pitfalls and Tips

• Always provide helpful navigation in Not Found pages - do not leave users stranded.
• Use route-specific Not Found pages for better context (e.g., "Post not found" vs generic "Page not found").
• Call notFound() early before expensive operations when you detect invalid params.

Learn More

• not-found.tsx
• notFound function