Cassidy Williams

Software Engineer in Chicago

Cassidy's face

Making a custom 404 page in Next.js


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:

Next.js 404 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.


View posts by tag

#advice #personal #musings #events #technical #learning #work #meta