How to create a custom 404 page in Next.js?

In the realm of web development, delivering an exceptional user experience extends beyond merely serving content – it encompasses gracefully handling errors and guiding users through unexpected scenarios. Next.js, the versatile React framework, empowers developers to create captivating, immersive web applications while offering robust tools for error management. One such tool is the ability to craft custom 404 pages, ensuring that even when users encounter a "resource not found" error, they are met with a seamless, on-brand experience that aligns with your application's aesthetic and functionality.

Understanding the Importance of Custom 404 Pages

A well-designed 404 page serves as more than just an error notification; it represents an opportunity to enhance user engagement and foster brand loyalty. By default, Next.js provides a minimalistic 404 page, but customizing it allows you to infuse your application with a unique personality and create a cohesive user journey.

Tailoring the 404 experience offers several benefits:

Branding Consistency: A custom 404 page enables you to maintain visual and tonal consistency with the rest of your application, reinforcing your brand identity and ensuring a seamless transition for users.

User Guidance: An effective 404 page should not leave users feeling lost or frustrated. By providing clear instructions or suggestions, you can guide them back to relevant content or alternative paths within your application.

Engagement Opportunities: A well-crafted 404 page can serve as a creative canvas for showcasing your brand's personality, injecting humor, or offering interactive elements that encourage users to explore further.

Analytics Insights: By tracking 404 errors, you can gain valuable insights into user behavior, identify broken links, and optimize your application's navigation and content structure accordingly.

With Next.js, implementing a custom 404 page is a straightforward process that can significantly enhance the overall user experience and strengthen your brand's online presence.

Setting the Stage: Configuring Your Next.js Environment

Before delving into the intricacies of creating a custom 404 page, it's essential to ensure your Next.js development environment is properly configured. If you haven't already, follow these steps to set up a new Next.js project:

1. Open your preferred terminal or command prompt.
2. Navigate to the directory where you wish to create your project.
3. Run the following command to initialize a new Next.js project:

npx create-next-app@latest your-project-name

➡️ Once the installation is complete, navigate into the project directory:

cd your-project-name

➡️ Start the development server by running:

npm run dev

Your Next.js application should now be up and running, and you're ready to begin customizing your 404 page.

Crafting the Custom 404 Page: A Step-by-Step Guide

Next.js simplifies the process of creating a custom 404 page by leveraging a dedicated file convention. Follow these steps to implement your tailored error experience:

1. Create the 404 File: Within your project's pages directory, create a new file named 404.js or 404.tsx (if you're using TypeScript).

2. Define the Component: Inside this file, define a React component that will render the content of your custom 404 page. This component can be as simple or complex as you desire, incorporating various React elements, styling, and functionality.

Here's an example of a basic 404 component:

import Link from "next/link";

const Custom404 = () => {
  return (
    <div className="error-container">
      <h1>Oops! Page Not Found</h1>
      <p>We're sorry, but the page you're looking for doesn't seem to exist.</p>
      <Link href="/">
        <button>Back to Home</button>
      </Link>
    </div>
  );
};

export default Custom404;

In this example, we import the Link component from Next.js to provide a convenient way for users to navigate back to the home page. The component renders a heading, an explanatory message, and a button that links back to the root URL.

➡️ Style the Component: Next, you can enhance the visual appeal of your 404 page by applying styles using CSS modules, styled-components, or any other preferred styling approach. For instance, you could add the following CSS to complement the component above:

.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
}

.error-container h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.error-container p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.error-container button {
  padding: 0.8rem 1.6rem;
  font-size: 1.2rem;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

This CSS code styles the error container, heading, paragraph, and button elements, creating a visually appealing and user-friendly 404 page.

➡️ Test the Custom 404 Page: With your custom 404 component in place, you can test it by navigating to a non-existent route within your Next.js application. For example, if you visit http://localhost:3000/non-existent-path, your custom 404 page should be rendered.

By following these steps, you've successfully created a tailored 404 page that aligns with your application's branding and provides a seamless user experience, even in the face of resource unavailability.

Enhancing the 404 Experience: Advanced Techniques

While the basic implementation of a custom 404 page is a significant improvement over the default experience, Next.js offers additional techniques to further refine and enhance your error handling strategy.

Implementing Dynamic 404 Pages

In certain scenarios, you may want to dynamically generate the content of your 404 page based on specific conditions or user data. Next.js allows you to leverage server-side rendering (SSR) and static site generation (SSG) to achieve this.

For server-side rendering, you can utilize the getServerSideProps function within your 404.js file. This function is executed on the server for every request, enabling you to fetch data or perform calculations to generate dynamic content:

import { GetServerSideProps } from 'next';

const Custom404 = ({ errorMessage }) => {
  return (
    <div className="error-container">
      <h1>Oops! Page Not Found</h1>
      <p>{errorMessage}</p>
      {/* ... */}
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async ({ res, req }) => {
  const errorMessage = `The page you requested (${req.url}) could not be found.`;

  return {
    props: {
      errorMessage,
    },
  };
};

export default Custom404;

In this example, the getServerSideProps function generates a dynamic error message based on the requested URL, which is then passed as a prop to the Custom404 component for rendering.

Alternatively, if your 404 page content can be pre-rendered at build time, you can leverage static site generation using the getStaticProps function:

import { GetStaticProps } from 'next';

const Custom404 = ({ errorData }) => {
  return (
    <div className="error-container">
      <h1>Oops! Page Not Found</h1>
      <p>{errorData.message}</p>
      {/* ... */}
    </div>
  );
};

export const getStaticProps: GetStaticProps = async () => {
  const errorData = {
    message: 'The requested page could not be found.',
    // Additional error data...
  };

  return {
    props: {
      errorData,
    },
  };
};

export default Custom404;

In this case, the getStaticProps function fetches or generates the error data during the build process, and the resulting props are passed to the Custom404 component for rendering.

By leveraging these techniques, you can create dynamic and context-aware 404 pages that provide users with more relevant and personalized error messages, further enhancing the overall user experience.

Integrating Error Tracking and Analytics

While a visually appealing and informative 404 page is essential, it's also crucial to monitor and analyze 404 errors to identify potential issues and optimize your application's performance. Next.js provides several options for integrating error tracking and analytics into your custom 404 page.

One approach is to leverage third-party error monitoring services, such as Sentry, Rollbar, or LogRocket. These services offer comprehensive error tracking and reporting capabilities, allowing you to capture and analyze 404 errors along with other application errors.

Here's an example of how you can integrate Sentry into your custom 404 page:

import * as Sentry from "@sentry/react";

const Custom404 = () => {
  Sentry.captureException(new Error("404 - Page Not Found"));

  return (
    <div className="error-container">
      <h1>Oops! Page Not Found</h1>
      <p>We're sorry, but the page you're looking for doesn't seem to exist.</p>
      {/* ... */}
    </div>
  );
};

export default Custom404;

In this example, we import the Sentry SDK and use the captureException method to log the 404 error. Sentry will then capture and report this error, providing detailed information about the request, user context, and other relevant metadata.

Alternatively, you can leverage Next.js's built-in error handling capabilities by creating a custom _error.js file within the pages directory. This file will catch and handle all unhandled exceptions and errors in your application, including 404 errors.

import { NextPageContext } from 'next';

const ErrorPage = ({ statusCode }) => {
  if (statusCode === 404) {
    // Render your custom 404 page component
    return <Custom404 />;
  }

  // Handle other error codes
  return (
    <div>
      <h1>An error occurred</h1>
      <p>Status Code: {statusCode}</p>
    </div>
  );
};

ErrorPage.getInitialProps = ({ res, err }: NextPageContext) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};

export default ErrorPage;

In this example, the ErrorPage component checks the statusCode prop and renders the Custom404 component if the status code is 404. For other error codes, it displays a generic error message.

The getInitialProps function is used to retrieve the status code from the server response or the error object, ensuring accurate error reporting.

Integrating error tracking and analytics into your custom 404 page, you gain valuable insights into user behavior, broken links, and potential issues within your application. This data can inform your decision-making process, enabling you to optimize your application's structure, navigation, and content for a seamless user experience.

Handling Dynamic Routes and Nested 404 Pages

Next.js supports dynamic routing, allowing you to create URLs that represent data structures or hierarchies within your application. In such scenarios, you may encounter situations where a specific route or nested route does not exist, requiring a tailored 404 experience.

Dynamic Route-Level 404 Pages

To create a custom 404 page for a specific dynamic route, you can follow a similar approach to the global 404 page, but within the respective route folder. For example, if you have a dynamic route for blog posts (/posts/[slug]), you can create a 404.js file inside the posts folder:

pages/
  posts/
    [slug]/
      404.js
    index.js

The 404.js file within the [slug] folder will handle 404 errors for individual blog post routes, while the global 404.js file in the pages directory will handle all other 404 errors.

Here's an example of what the 404.js file inside the [slug] folder might look like:

import Link from "next/link";

const PostNotFound = () => {
  return (
    <div className="error-container">
      <h1>Post Not Found</h1>
      <p>
        We're sorry, but the blog post you're looking for doesn't seem to exist.
      </p>
      <Link href="/posts">
        <button>View All Posts</button>
      </Link>
    </div>
  );
};

export default PostNotFound;

In this example, the PostNotFound component renders a tailored error message for missing blog posts and provides a link to the main blog posts page.

Nested 404 Pages

In some cases, you may have nested routes or folders within your application, each with their own set of dynamic routes. Next.js allows you to create nested 404 pages to handle errors at various levels of your routing hierarchy.

For example, consider the following folder structure:

pages/
  blog/
    [category]/
      [slug]/
        404.js
        page.js
      404.js
      page.js
    404.js
    page.js

In this structure, the 404.js file within the [slug] folder would handle 404 errors for individual blog posts within a specific category. The 404.js file in the [category] folder would handle 404 errors for non-existent categories, while the 404.js file in the blog folder would handle 404 errors for the entire blog section.

This approach, you can create a comprehensive error handling strategy that caters to different levels of your application's routing structure, providing users with relevant and context-aware error messages and guidance.

Integrating with Next.js Middleware

Next.js 13 introduced a powerful feature called Middleware, which allows you to intercept and modify incoming requests before they reach your application's pages. This feature can be leveraged to enhance your 404 error handling strategy, providing additional flexibility and control over how errors are handled and redirected.

Implementing a Catch-All Route

One approach to handling 404 errors with Next.js Middleware is to implement a catch-all route that captures all unmatched routes and redirects them to your custom 404 page. Here's an example of how you can achieve this:

1. Create a new folder within the app directory, named not-found. This folder will contain the components and logic for handling 404 errors.

2. Inside the not-found folder, create a file named page.tsx (or page.js if you're not using TypeScript). This file will serve as the entry point for your custom 404 page.

3. In the page.tsx file, import the notFound function from next/navigation and call it within the component:

import { notFound } from "next/navigation";

export default function NotFoundPage() {
  notFound();
  return null; // or render a fallback component
}

The notFound function will trigger the 404 error handling mechanism in Next.js, ensuring that your custom 404 page is rendered.

➡️ Create a new file named middleware.ts (or middleware.js) within the root of your app directory. This file will contain the middleware logic for catching unmatched routes.

➡️ Inside the middleware.ts file, define a middleware function that checks if the requested path matches any of your application's routes. If no match is found, redirect the request to the not-found route:

import { NextResponse } from "next/server";
import { matchRoutes } from "next/dist/server/router";
import routes from "./routes";

export function middleware(request) {
  const matchedRoute = matchRoutes(routes, request.nextUrl.pathname);

  if (!matchedRoute) {
    return NextResponse.rewrite(new URL("/not-found", request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: "/:path*",
};

In this example, we import the matchRoutes function from Next.js to check if the requested path matches any of the routes defined in the routes module. If no match is found, we redirect the request to the /not-found route using rewrite and NextResponse.rewrite. The config object specifies that this middleware should be applied to all routes (/:path*).

Finally, in the app directory, create a file named routes.ts (or routes.js) and define your application's routes:

import { Route } from 'next/dist/server/router';

const routes: Route[] = [
  // Define your application's routes here
  {
    pattern: '/',
    name: 'home',
    path: '/',
  },
  {
    pattern: '/about',
    name: 'about',
    path: '/about',
  },
  // Add more routes as needed
];

export default routes;

With this setup, any request that doesn't match the defined routes will be redirected to the /not-found route, triggering your custom 404 page rendering.

Customizing Error Handling with Middleware

Next.js Middleware also provides flexibility in customizing how errors are handled within your application. You can intercept errors at different stages of the request lifecycle and perform additional actions or redirects based on specific error conditions.

For example, you could create a dedicated error handling middleware that catches all errors and redirects them to a centralized error page:

import { NextResponse } from "next/server";

export function middleware(request) {
  try {
    // Execute your application logic or other middleware functions
    return NextResponse.next();
  } catch (error) {
    // Handle errors and redirect to a centralized error page
    return NextResponse.rewrite(new URL("/error", request.url));
  }
}

export const config = {
  matcher: "/:path*",
};

In this example, the middleware function wraps your application logic in a try block. If an error occurs, it catches the error and redirects the request to the /error route, where you can render a centralized error page component.

You can further extend this approach by inspecting the error object and conditionally rendering different error pages based on the error type or status code. For instance, you could render a specific 404 page for "resource not found" errors and a different page for other types of errors.

Next.js Middleware, you gain greater control over error handling and can implement sophisticated strategies to provide a seamless and consistent user experience across your application.

Optimizing 404 Pages for Search Engine Optimization (SEO)

While creating a visually appealing and informative 404 page is crucial for user experience, it's also important to consider search engine optimization (SEO) when designing your error handling strategy. Search engines like Google and Bing use various signals to understand and rank websites, and how you handle 404 errors can impact your site's SEO performance.

Returning the Correct HTTP Status Code

One of the most important aspects of optimizing your 404 page for SEO is ensuring that it returns the correct HTTP status code (404) to search engine crawlers. This status code signals to search engines that the requested resource could not be found, allowing them to appropriately handle the error and update their index accordingly.

Next.js automatically handles this for you when rendering the 404.js page, so you don't need to worry about manually setting the status code. However, if you're using custom server-side rendering or middleware to handle 404 errors, make sure to set the appropriate status code (404) in your response headers.

Providing Informative Error Messages

In addition to the correct status code, search engines also consider the content and structure of your 404 page when evaluating its relevance and usefulness. Providing clear and informative error messages can help search engines better understand the context of the error and improve the overall user experience.

Here are some best practices for crafting informative 404 error messages:

Clearly state the issue: Use concise and straightforward language to explain that the requested resource could not be found.

Suggest alternative actions: Provide users with suggestions or links to relevant pages within your application, such as the homepage, search functionality, or popular content sections.

Offer search functionality: Consider including a search bar or form on your 404 page, allowing users to quickly find the content they were looking for.

Include relevant metadata: Ensure that your 404 page includes appropriate metadata, such as the page title, description, and keywords, to help search engines understand the context of the error.

Maintain branding and design consistency: Keep your 404 page visually consistent with the rest of your application, reinforcing your brand identity and providing a seamless user experience.

These best practices, you can create a user-friendly and SEO-optimized 404 page that helps search engines understand the context of the error and provides users with a clear path forward.

Implementing Redirects for Common Error Scenarios

In some cases, you may want to redirect users from common error scenarios to more relevant pages or resources within your application. This can help improve the user experience and reduce the likelihood of users encountering 404 errors in the first place.

Next.js provides several ways to implement redirects, including the redirect function from the next/navigation module and the Redirect component from the next/navigation module.

Here's an example of how you can use the redirect function to redirect users from a common error scenario to a more relevant page:

import { redirect } from 'next/navigation';

export default function ErrorRedirect() {
  // Check for a specific error condition
  const errorCondition = /* ... */;

  if (errorCondition) {
    // Redirect to a more relevant page
    redirect('/relevant-page');
  }

  // Render your 404 page component
  return <Custom404 />;
}

In this example, we check for a specific error condition (e.g., a common broken link or typo in the URL) and use the redirect function to navigate the user to a more relevant page if the condition is met. If the error condition is not met, the component renders the default Custom404 page.

Alternatively, you can use the Redirect component to handle redirects within your application's UI:

import { Redirect } from 'next/navigation';

export default function ErrorRedirect() {
  // Check for a specific error condition
  const errorCondition = /* ... */;

  if (errorCondition) {
    // Redirect to a more relevant page
    return <Redirect href="/relevant-page" />;
  }

  // Render your 404 page component
  return <Custom404 />;
}

In this example, we render the Redirect component with the href prop set to the desired redirect URL if the error condition is met. Otherwise, the component renders the Custom404 page.

Implementing redirects for common error scenarios, you can proactively prevent users from encountering 404 errors and provide a more seamless user experience while improving your site's overall SEO performance.

Leveraging Analytics and Error Tracking

While creating a visually appealing and informative 404 page is crucial, it's equally important to monitor and analyze 404 errors to identify potential issues and optimize your application's performance. Next.js provides several options for integrating error tracking and analytics into your custom 404 page, allowing you to gain valuable insights and take proactive measures to improve the user experience.

Integrating with Third-Party Error Tracking Services

One approach to tracking and analyzing 404 errors is to leverage third-party error monitoring services, such as Sentry, Rollbar, or LogRocket. These services offer comprehensive error tracking and reporting capabilities, allowing you to capture and analyze 404 errors along with other application errors.

Here's an example of how you can integrate Sentry into your custom 404 page:

import * as Sentry from "@sentry/react";

const Custom404 = () => {
  Sentry.captureException(new Error("404 - Page Not Found"));

  return (
    <div className="error-container">
      <h1>Oops! Page Not Found</h1>
      <p>We're sorry, but the page you're looking for doesn't seem to exist.</p>
      {/* ... */}
    </div>
  );
};

export default Custom404;

In this example, we import the Sentry SDK and use the captureException method to log the 404 error. Sentry will then capture and report this error, providing detailed information about the request, user context, and other relevant metadata.

By integrating with third-party error tracking services, you can centralize and analyze 404 errors alongside other application errors, enabling you to identify patterns, pinpoint root causes, and take proactive measures to address issues.

Leveraging Next.js Error Handling and Reporting

Next.js provides built-in error handling capabilities that can be leveraged to track and report 404 errors. One approach is to create a custom _error.js file within the pages directory. This file will catch and handle all unhandled exceptions and errors in your application, including 404 errors.

import { NextPageContext } from 'next';

const ErrorPage = ({ statusCode }) => {
  if (statusCode === 404) {
    // Render your custom 404 page component
    return <Custom404 />;
  }

  // Handle other error codes
  return (
    <div>
      <h1>An error occurred</h1>
      <p>Status Code: {statusCode}</p>
    </div>
  );
};

ErrorPage.getInitialProps = ({ res, err }: NextPageContext) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};

export default ErrorPage;

In this example, the ErrorPage component checks the statusCode prop and renders the Custom404 component if the status code is 404. For other error codes, it displays a generic error message.

The getInitialProps function is used to retrieve the status code from the server response or the error object, ensuring accurate error reporting.

You can further enhance this approach by integrating with logging and monitoring services, allowing you to capture and analyze error data from a centralized location.

Implementing Custom Error Tracking and Reporting

If you prefer a more custom approach to error tracking and reporting, Next.js provides the flexibility to implement your own error tracking and reporting mechanisms. One way to achieve this is by leveraging server-side rendering (SSR) or static site generation (SSG) to capture and log error data during the rendering process.

For server-side rendering, you can utilize the getServerSideProps function within your 404.js file. This function is executed on the server for every request, enabling you to perform error logging or reporting actions:

import { GetServerSideProps } from 'next';
import { logError } from './utils/errorLogging';

const Custom404 = ({ errorMessage }) => {
  return (
    <div className="error-container">
      <h1>Oops! Page Not Found</h1>
      <p>{errorMessage}</p>
      {/* ... */}
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async ({ res, req }) => {
  const errorMessage = `The page you requested (${req.url}) could not be found.`;

  // Log the error or send it to a reporting service
  logError(errorMessage, req);

  return {
    props: {
      errorMessage,
    },
  };
};

export default Custom404;

In this example, the getServerSideProps function generates a dynamic error message based on the requested URL. Additionally, it calls a custom logError function, passing the error message and the request object. This logError function can be implemented to log errors to a file, send them to a remote logging service, or perform any other desired error reporting actions.

Alternatively, if your 404 page content can be pre-rendered at build time, you can leverage static site generation using the getStaticProps function:

import { GetStaticProps } from 'next';
import { logError } from './utils/errorLogging';

const Custom404 = ({ errorData }) => {
  return (
    <div className="error-container">
      <h1>Oops! Page Not Found</h1>
      <p>{errorData.message}</p>
      {/* ... */}
    </div>
  );
};

export const getStaticProps: GetStaticProps = async () => {
  const errorData = {
    message: 'The requested page could not be found.',
    // Additional error data...
  };

  // Log the error or send it to a reporting service
  logError(errorData.message);

  return {
    props: {
      errorData,
    },
  };
};

export default Custom404;

In this case, the getStaticProps function fetches or generates the error data during the build process. Additionally, it calls the logError function, passing the error message or any other relevant error data.

By implementing custom error tracking and reporting mechanisms, you gain greater control over how error data is captured, processed, and reported. This approach allows you to integrate with your preferred logging and monitoring services, enabling you to analyze error patterns, identify root causes, and take proactive measures to improve your application's performance and user experience.

Enhancing Accessibility and User Experience

While crafting a visually appealing and informative 404 page is crucial, it's equally important to ensure that your error handling strategy is accessible and user-friendly. By incorporating accessibility best practices and prioritizing user experience, you can create a seamless and inclusive experience for all users, regardless of their abilities or preferences.

Adhering to Web Accessibility Guidelines

Web accessibility guidelines, such as the Web Content Accessibility Guidelines (WCAG), provide a set of standards and best practices to ensure that web content is accessible to users with disabilities. When designing your custom 404 page, it's essential to adhere to these guidelines to ensure that your error handling strategy is inclusive and accessible to all users.

Here are some key accessibility considerations for your custom 404 page:

Semantic HTML: Use semantic HTML elements to structure your content and convey meaning to assistive technologies, such as screen readers. For example, use headings (< h1 >, < h2 >, etc.) to organize content, and use appropriate elements like < nav > for navigation and < main > for the main content.

Proper Contrast: Ensure that there is sufficient color contrast between the text and background colors to make the content easily readable for users with visual impairments or color blindness.

Keyboard Accessibility: Make sure that all interactive elements, such as links and buttons, are accessible and operable using a keyboard. This includes providing visible focus indicators and logical tab order.

Alternative Text: Provide alternative text (alt attribute) for images and other non-text content to ensure that users with visual impairments can understand the content.

Responsive Design: Implement responsive design principles to ensure that your 404 page is accessible and usable across different devices and screen sizes.

ARIA Attributes: Use ARIA (Accessible Rich Internet Applications) attributes to provide additional context and information to assistive technologies, such as screen readers, when necessary.

Adhering to web accessibility guidelines, you can ensure that your custom 404 page is inclusive and usable for all users, including those with disabilities or impairments.

Enhancing User Experience with Clear Guidance

In addition to accessibility considerations, it's crucial to prioritize user experience when designing your custom 404 page. A well-designed 404 page should provide clear guidance and actionable steps to help users navigate back to relevant content or find the information they were initially seeking.

Here are some user experience best practices to consider:

Clear and Concise Error Message: Provide a clear and concise error message that explains the issue in simple, easy-to-understand language. Avoid using technical jargon or confusing terminology that may be difficult for non-technical users to comprehend.

Suggest Relevant Actions: Offer users relevant actions or suggestions to help them find what they were looking for. This could include links to popular pages, a search functionality, or a list of related content.

Provide Navigation Options: Include clear navigation options, such as links to the homepage, site map, or relevant sections of your application. This can help users quickly navigate to their desired destination without getting lost or frustrated.

Maintain Branding and Consistency: Ensure that your custom 404 page maintains visual and branding consistency with the rest of your application. This helps reinforce your brand identity and provides a seamless user experience.

Incorporate Humor or Personality: Consider incorporating humor or personality into your 404 page to lighten the mood and create a more engaging experience for users. However, be mindful of cultural differences and ensure that any humor or personality elements are appropriate and inclusive.

Offer Feedback Mechanisms: Provide users with a mechanism to provide feedback or report issues related to the 404 error. This can help

FAQ: Custom 404 Page in Next.js

// pages/404.js
import Link from "next/link";

const Custom404 = () => {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>
        Sorry, the page you are looking for does not exist. Go back to the{" "}
        <Link href="/">
          <a>homepage</a>
        </Link>
        .
      </p>
    </div>
  );
};

export default Custom404;

/* styles/404.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
}

.heading {
  font-size: 3em;
  margin-bottom: 20px;
}

.text {
  font-size: 1.2em;
}

// pages/404.js
import Link from "next/link";
import styles from "../styles/404.module.css";

const Custom404 = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.heading}>404 - Page Not Found</h1>
      <p className={styles.text}>
        Sorry, the page you are looking for does not exist. Go back to the{" "}
        <Link href="/">
          <a>homepage</a>
        </Link>
        .
      </p>
    </div>
  );
};

export default Custom404;

// pages/404.js
import Link from "next/link";
import { useState } from "react";
import styles from "../styles/404.module.css";

const Custom404 = () => {
  const [searchQuery, setSearchQuery] = useState("");

  const handleSearchChange = (e) => {
    setSearchQuery(e.target.value);
  };

  const handleSearchSubmit = (e) => {
    e.preventDefault();
    window.location.href = `/search?query=${searchQuery}`;
  };

  return (
    <div className={styles.container}>
      <h1 className={styles.heading}>404 - Page Not Found</h1>
      <p className={styles.text}>
        Sorry, the page you are looking for does not exist. Go back to the{" "}
        <Link href="/">
          <a>homepage</a>
        </Link>
        .
      </p>
      <form onSubmit={handleSearchSubmit} className={styles.searchForm}>
        <input
          type="text"
          value={searchQuery}
          onChange={handleSearchChange}
          className={styles.searchInput}
          placeholder="Search..."
        />
        <button type="submit" className={styles.searchButton}>
          Search
        </button>
      </form>
    </div>
  );
};

export default Custom404;

// pages/404.js
import Link from "next/link";
import styles from "../styles/404.module.css";

const Custom404 = () => {
  const recentPosts = [
    { title: "Post 1", url: "/post-1" },
    { title: "Post 2", url: "/post-2" },
    { title: "Post 3", url: "/post-3" },
  ];

  return (
    <div className={styles.container}>
      <h1 className={styles.heading}>404 - Page Not Found</h1>
      <p className={styles.text}>
        Sorry, the page you are looking for does not exist. Go back to the{" "}
        <Link href="/">
          <a>homepage</a>
        </Link>
        .
      </p>
      <div className={styles.recentPosts}>
        <h2>Recent Posts</h2>
        <ul>
          {recentPosts.map((post, index) => (
            <li key={index}>
              <Link href={post.url}>
                <a>{post.title}</a>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default Custom404;

// pages/404.js
import Link from "next/link";
import { useState } from "react";
import styles from "../styles/404.module.css";

const Custom404 = () => {
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handleMessageChange = (e) => {
    setMessage(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // handle form submission (e.g., send to an API endpoint)
  };

  return (
    <div className={styles.container}>
      <h1 className={styles.heading}>404 - Page Not Found</h1>
      <p className={styles.text}>
        Sorry, the page you are looking for does not exist. Go back to the{" "}
        <Link href="/">
          <a>homepage</a>
        </Link>
        .
      </p>
      <form onSubmit={handleSubmit} className={styles.contactForm}>
        <input
          type="email"
          value={email}
          onChange={handleEmailChange}
          className={styles.contactInput}
          placeholder="Your email"
          required
        />
        <textarea
          value={message}
          onChange={handleMessageChange}
          className={styles.contactTextarea}
          placeholder="Your message"
          required
        />
        <button type="submit" className={styles.contactButton}>
          Send
        </button>
      </form>
    </div>
  );
};

export default Custom404;

Conclusion

Creating a custom 404 page in Next.js can significantly enhance user experience and maintain brand consistency. By following the steps outlined in this guide, you can create a simple yet effective custom 404 page and expand its functionality with features like a search bar, recent posts, and a contact form. This not only helps users navigate your site more efficiently but also provides them with more options to find what they are looking for.

Here are some useful references to guide you while creating a custom 404 page in Next.js:

1. Next.js Official Documentation – Custom Error Pages: The official documentation provides clear instructions on how to implement custom error pages, including 404.

   • Custom Error Pages in Next.js

2. Next.js GitHub Examples: A collection of example applications, including how to create custom pages in Next.js.

   • Next.js GitHub Examples

3. MDN Web Docs – HTTP Status Codes: Understanding HTTP status codes can help you explain why a 404 error occurs and how Next.js uses these codes in routing.

   • MDN: HTTP Status 404

4. Smashing Magazine – Best Practices for 404 Pages: This article goes beyond the technical implementation and dives into the best practices for designing effective 404 pages.

   • Smashing Magazine: Designing 404 Pages

5. CSS Tricks – Creative 404 Page Ideas: If you’re looking to make your 404 page more visually engaging, this article offers creative ideas and examples.

   • CSS Tricks: Creative 404 Page Ideas