Next.js - notFound() Function

The notFound() Function

The Next.js notFound() function is used to render the not-found file within a route segment. This function is helpful when you want to display a custom 404 page for a specific route or segment of your application.

Syntax

Following is the syntax of notFound() function:

import { notFound } from 'next/navigation'

export default async function Profile({ params }) {
    const user = await fetchUser((await params).id)
    
    // If user not found, render the not-found page
    if (!user) {
        notFound()
    }
}

Parameters

The notFound() function does not take any parameters.

Return Value

The notFound() function does not return any value. The notFound does not require you to use 'return notFound()' as it uses the TypeScript never type.

Key Points

• The notFound() function is used to render the not-found file within a route segment.
• Invoking the notFound() function throws a NEXT_NOT_FOUND error and terminates rendering of the route segment in which it was thrown.
• You can create a not-found.tsx file in the root directory of your application. This file defines the UI shown when notFound() is called.

Example

In the example below, we are creating a not-found.tsx file in the root directory of our application. This file defines the UI shown when notFound() is called.

// app/not-found.tsx

export default function Custom404() {
    return (
        <div>
            <h1>404 - Page Not Found</h1>
            <p>Sorry, the page you are looking for does not exist.</p>
        </div>
    );
}

// app/posts/[id]/page.tsx

import { notFound } from 'next/navigation';

async function getPost(id: string) {
  const post = await fetch(`/api/posts/${id}`);
  if (!post.ok) return null;
  return post.json();
}

export default async function Post({ params }: { params: { id: string } }) {
  const post = await getPost(params.id);
  
  if (!post) {
    notFound(); // This triggers the not-found.tsx page
  }

  return (
    <article>
        <h1>{post.title}</h1>
        <p>{post.content}</p>
    </article>
  );
}

Output

In the output, when we try to visit any random pages, 404 error which we defined is displayed.