DEV Community

Cassidy Williams for Netlify

Posted on • Originally published at netlify.com on

4

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 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>
  </>
}

Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay