---
title: "Making a custom 404 page in Next.js"
description: "Why have a boring default error page when you can spruce it up? Next.js has a custom static 404 page built right into the framework. Here’s how to use it."
source: "https://www.netlify.com/blog/2020/12/08/making-a-custom-404-page-in-next.js/"
last_updated: "2026-07-28T11:50:10.000Z"
---
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 <>
404 - Page Not Found
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](https://github.com/netlify/explorers/blob/main/src/pages/404.js)).
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](https://www.netlify.com/blog/nextjs-advanced-middleware-better-runtime-that-extends-nextjs/).
### Share
- [X (fka Twitter)](https://twitter.com/intent/tweet?text=Making a custom 404 page in Next.js&url=https://www.netlify.com/blog/2020/12/08/making-a-custom-404-page-in-next.js//)
- [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2020%2F12%2F08%2Fmaking-a-custom-404-page-in-next.js%2F%2F)
- [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2020/12/08/making-a-custom-404-page-in-next.js//)
- [Bluesky](https://bsky.app/intent/compose?text=Making a custom 404 page in Next.js+https://www.netlify.com/blog/2020/12/08/making-a-custom-404-page-in-next.js//)
* * *
### Tags
- [Next.js](/blog/tags/next.js/)
- [blogvent](/blog/tags/blogvent/)
## Keep reading
Guides & Tutorials December 7, 2020
[
### Absolute Imports in Next.js
](/blog/2020/12/07/absolute-imports-in-next.js/)
- 
Cassidy Williams
Guides & Tutorials November 30, 2020
[
### How to Deploy Next.js Sites to Netlify
](/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/)
- 
Jason Lengstorf
## Recent posts
Tools & Services July 27, 2026
[
### The 13-year story of Netlify Drop
](/blog/thirteen-years-of-netlify-drop)
- 
Wade Wegner
News & Announcements July 14, 2026
[
### More headroom, a lower per-credit rate, and a bill you can predict: introducing new Pro plan tiers
](/blog/new-pro-plan-tiers)
- 
Gehrig Kunz
News & Announcements July 13, 2026
[
### Netlify inside of Claude Design
](/blog/netlify-inside-of-claude-design)
- 
Sean Roberts
### How do the best dev and marketing teams work together?
[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)