Guides & Tutorials

Making a custom 404 page in Next.js

Guides & Tutorials

Making a custom 404 page in Next.js

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 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="/">
        Go back home

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.

Keep reading

Recent posts

Book cover with the title Deliver web project 10 times faster with Jamstack enterprise

Deliver web projects 10× faster

Get the whitepaper