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.