Working in a Next.js product, and you accidentally enter the wrong url. Magically a bright white page appears with the words 404 🤩

🍧 Solution

The simplest way to resolve this is to create a .tsx or .jsx file in the pages directory of your Next.js application, like so:

import React from 'react';

export const custom404 = () => {
    return (
        <h1 style={{color: "white"}}>Hello! 👋</h1>
    );
};

export default custom404;

🎉 And that's it! You now have a custom 404 page, so finally no unhappy customers :)

📆 Initially published: 7th of November 2021.