How to Create a Custom 404 (Not Found) Page in Next.js

When building a web application with Next.js, providing a seamless and user-friendly experience is crucial. One aspect of this user experience is handling 404 errors gracefully. A 404 error occurs when a user tries to access a page that doesn't exist on your site. Instead of displaying a generic and uninformative error message, you can create a custom 404 page that aligns with your site's design and helps users navigate effectively. In this article, we'll walk through the steps to create a custom 404 page in Next.js.

How to Create a Custom 404 (Not Found) Page in Next.js

1. Create a Custom 404 Page Component

Start by creating a new component for your custom 404 page. In your pages directory, create a file named 404.js or 404.tsx (depending on your project setup). This file will contain the JSX or TypeScript code for your custom 404 page.

// pages/404.js or pages/404.tsx

import Link from 'next/link';

const Custom404 = () => {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>
        The page you are looking for might have been removed, had its name
        changed, or is temporarily unavailable.
      </p>
      <Link href="/">
        <a>Go back to the home page</a>
      </Link>
    </div>
  );
};

export default Custom404;

Feel free to customize the content and styling according to your project's design and messaging.

2. Customize the Error Page with Styles

To enhance the visual appeal of your custom 404 page, you can add styles using CSS or a styling solution like styled-components or tailwindcss. Update your component file to include styles that align with your application's design:

// pages/404.js or pages/404.tsx

import Link from 'next/link';
import styles from '../styles/404.module.css'; // Import your styles

const Custom404 = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>404 - Page Not Found</h1>
      <p className={styles.description}>
        The page you are looking for might have been removed, had its name
        changed, or is temporarily unavailable.
      </p>
      <Link href="/">
        <a className={styles.link}>Go back to the home page</a>
      </Link>
    </div>
  );
};

export default Custom404;

Create a corresponding CSS or module file (404.module.css) in your styles directory to define the styles:

/* styles/404.module.css */

.container {
  text-align: center;
  margin-top: 50px;
}

.title {
  font-size: 2em;
  color: #ff0000;
}

.description {
  margin-top: 20px;
  color: #666;
}

.link {
  margin-top: 20px;
  color: #0070f3;
  text-decoration: underline;
  cursor: pointer;
}

3. Configure Custom Error Page in `_error.js`

In Next.js, the _error.js file in the pages directory is used to handle server-side errors. To configure the custom 404 page, modify the _error.js file to redirect to your custom 404 page:

// pages/_error.js

import React from 'react';
import Custom404 from './404';

class Error extends React.Component {
  static getInitialProps({ res, err }) {
    const statusCode = res ? res.statusCode : err ? err.statusCode : null;
    return { statusCode };
  }

  render() {
    const { statusCode } = this.props;

    return <Custom404 />;
  }
}

export default Error;

With this setup, any time a user tries to access a non-existent page, they will be redirected to your custom 404 page.

Conclusion

Creating a custom 404 page in Next.js is a straightforward process that allows you to provide a more user-friendly experience for your visitors. By customizing the content and styles, you can ensure that even in the face of a missing page, users remain engaged and informed. Take advantage of Next.js's flexibility to tailor error pages to match your application's overall design and branding.

How to Create a Custom 404 (Not Found) Page in Next.js

Suresh Ramani