If you've ever messed around enough with your Next.js applications and poked around with new routes, you're probably familiar with this error page:

It's a well-designed, simple page, but what if you want to add your own branding and linking to it? Well, luckily for you, they thought of that, and it's as simple as adding a 404.js file inside of your pages/ directory.

Here's a quick example of what you could do:

// 404.js
import Link from 'next/link'

export default function FourOhFour() {
  return <>
    <h1>404 - Page Not Found</h1>
    <Link href="/">
      <a>
        Go back home
      </a>
    </Link>
  </>
}

Because this is just like any other page component in Next.js, you can add whatever styling, links, data, or copy you'd like. Take a look at the 404 page on Jamstack Explorers to see an example of a Next.js 404 page in action (you can also check out the code here).

For other errors, you can do the exact same thing with an _error.js file in the pages/ directory! The 404 error is special because it is always statically generated, but the others rely on the server.

If you'd like to use the server-rendering aspects of Next.js on Netlify, check out our new runtime for Next.js.