Custom Error Page Implementation

Create a custom error page in Next.js by extending the default error page, to handle errors globally and display a friendly message to the user.

// pages/_error.js
import React from 'react';
import Link from 'next/link';

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

    render() {
        return (
            <div>
                <h1>{this.props.statusCode 
                    ? `An error ${this.props.statusCode} occurred on server`
                    : 'An error occurred on client'}</h1>
                <Link href="/">
                    <a>Go back home</a>
                </Link>
            </div>
        );
    }
}

export default Error;

This is a custom _error.js page for Next.js. It extends the default error page, capturing both server and client-side errors, and displays a friendly error message alongside a link to navigate back to the home page.

/* styles/global.css */

body {
    font-family: 'Arial', sans-serif;
    background: #f7f7f7;
    color: #333;
    margin: 0;
    padding: 20px;
}

div {
    width: 100%;
    max-width: 600px;
    margin: 100px auto 0;
    text-align: center;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

a {
    color: #0070f3;
    text-decoration: none;
    font-size: 16px;
}

This is the CSS to style the custom error page defined in _error.js file. It includes basic styles for the body, div container, heading, and link to make the error page look visually appealing.