How to create a custom 404 error page for NextJS?

When developing websites with NextJS, it is essential to provide a pleasant experience for our users when they encounter a 404 error.

A 404 error is an error we encounter when something does not exist or has not been found: in this case, a page on a site. 😗

Rather than displaying a generic page offered by default by NextJS, let's try to create a custom 404 page to maintain user engagement.

Why customize a 404 page?

As we've seen, we typically encounter a 404 error when an invalid or incorrect URL has been requested.

Here is the type of 404 error you might encounter on Believemy:

A well-thought-out 404 page allows:

• keeping users on our website by redirecting them to relevant content;
• adding a touch of humor to highlight the company's universe;
• improving user experience.

Step 1: Create a not-found page

For the rest of this article, we will use the latest App router of NextJS.

In NextJS, we can create a 404 error page very easily: simply go to your app folder and create a not-found.jsx (or not-found.tsx if you want to use Typescript).

Here's an example for app/not-found.jsx:

// app/not-found.jsx
import Link from 'next/link';

const Custom404 = () => {
  return (
    <div>
      <h1>404. Page non trouvée</h1>
      <p>
        Il semble que la page que vous recherchez n'existe pas. Retournez à l'accueil ou explorez d'autres sections.
      </p>
      <Link href="/" >
        Retour à l'accueil
      </Link>
    </div>
  );
};

export default Custom404;

We now have our error page ready to use! Look for an invalid URL on your site: you should be able to see your new custom 404 error page.

Step 2: Create multiple 404 error pages

It is also interesting to create several different 404 error pages with the NextJS app router.

The idea is to offer different experiences depending on the section of the site we are on.

The advantage is that it's simple and quick thanks to the app router. It is indeed possible to have multiple not-found pages in the same project! For example:

• app/not-found.jsx - Will be a 404 error page for all 404 errors encountered on our site
• app/articles/not-found.jsx - Will be a 404 error page for all 404 errors encountered specifically in articles URLs.
• app/profiles/not-found.jsx - Will be a 404 error page for all 404 errors encountered specifically in profiles URLs.

In short, you get the idea!

Conclusion

Creating a custom 404 error page with Next.js is an important step in offering a consistent and attractive user experience: well-designed, this page can not only minimize user frustration but also reinforce the image of your site.

In summary:

1. Create a not-found.jsx file in the app folder
2. Add links and animations
3. Think about creating 404 pages dedicated to certain parts of your site

And to go even further, consider checking out our complete training on NextJS. ✨