Post
Ask Question

How to Create a Custom 404 Page in Next.js

Introduction

A 404 page appears when a user tries to access a page that doesn’t exist. Customizing this page allows you to provide a better user experience by guiding users back to relevant content or offering alternative actions. In Next.js, creating a custom 404 page is straightforward and can be done in a few simple steps.

Create a Custom 404 Page


Add a 404 Page Component

Create a 404.js file in the pages directory. This file will automatically be used by Next.js for handling 404 errors.

// pages/404.js
import Link from 'next/link';
import styles from './404.module.css'; // Optional: for styling
const Custom404 = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>404 - Page Not Found</h1>
      <p className={styles.message}>
        Sorry, the page you’re looking for doesn’t exist.
      </p>
      <Link href="/">
        <a className={styles.link}>Go back to Home</a>
      </Link>
    </div>
  );
};
export default Custom404;

Style Your 404 Page

Optionally, create a CSS module file 404.module.css for custom styling.

/* pages/404.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
}
.title {
  font-size: 4rem;
  margin-bottom: 1rem;
}
.message {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}
.link {
  color: #0070f3;
  text-decoration: underline;
}

Adding Functionality
 

Provide Navigation Options

Enhance the user experience by including links to popular pages or a search bar.

// pages/404.js
import Link from 'next/link';
import { useRouter } from 'next/router';
import styles from './404.module.css';
const Custom404 = () => {
  const router = useRouter();
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>404 - Page Not Found</h1>
      <p className={styles.message}>Sorry, the page you’re looking for doesn’t exist.</p>
      <Link href="/">
        <a className={styles.link}>Go back to Home</a>
      </Link>
      <button onClick={() => router.push('/')} className={styles.button}>
        Go to Home
      </button>
    </div>
  );
};
export default Custom404;

Track 404 Errors

Consider logging 404 errors to monitor user activity and identify broken links. Implement server-side logging or integrate with analytics tools.

Deploy and Test
 

Run Your Development Server

Ensure your custom 404 page appears correctly during development.

npm run dev

Test Your 404 Page

Navigate to a non-existent route to verify that your custom 404-page displays as expected. Test various scenarios to ensure all functionality works correctly.

Best Practices

  • Clear Messaging: Ensure the message is clear and helpful to guide users effectively.
  • Consistent Design: Match the design of your 404 page with the rest of your site to maintain a cohesive look and feel.
  • User Guidance: Provide useful navigation options to help users find relevant content or return to familiar areas.

Summary

Creating a custom 404 page in Next.js is a simple process that enhances user experience by offering clear messaging and navigation options. By following these steps, you can design an informative and user-friendly 404 page that aligns with your site's design and functionality.


Similar Articles