Custom 404 Page Styling in Next.js

Provide an example of how to create and style a custom 404 Not Found page in Next.js.

import React from 'react';
import styles from './Custom404.module.css'; // Import the styles from your CSS/SCSS module

export default function Custom404() {
    return (
        <div className={styles.container}>
            <h1 className={styles.title}>404 - Page Not Found</h1>
            <p className={styles.description}>Oops! The page you are looking for does not exist.</p>
        </div>
    );
}

This is a React component for a custom 404 page in Next.js. It uses a separate CSS module for styling.

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

.title {
    font-size: 2rem;
    color: #333;
}

.description {
    font-size: 1rem;
    color: #666;
}

This is the CSS module that contains the styles for the custom 404 page. It defines the styles for the container, title, and description elements.

import Custom404 from './Custom404';

// This should be in pages/_app.js
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

// This component will automatically be used as the 404 page
export default MyApp;

This code snippet shows how to integrate the custom 404 component with the Next.js app by adding it to the pages folder as 404.js.