Making a custom 404 page in Next.js

#nextjs #blogvent

Welcome to Blogvent, day 8!

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.

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 one-click install build plugin.

Wanna a custom Next.js 404 page in action? Take a look at the 404 page on Jamstack Explorers! You can also check out the code here.