next.js: Creating a custom 404 page with Next 13

What is the improvement or update you wish to see?

I’ve just finished upgrading to Next 13 – feels like a big improvement, well done for all your hard work.

Just one problem I seem to be having – creating a custom 404 page. According to the upgrade guide, the new app directory doesn’t support this yet. I assumed that it might work by using the pages directory instead, but it doesn’t seem to get picked up by that either. Is this expected? Or am I perhaps missing something?

Just to be clear, this is what I’ve tried:

/app
  404.tsx

and

/pages
  404.tsx

Neither of these seem to work.

Is there any context that might help us understand?

See above.

Does the docs page already exist? Please link to it.

https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app

About this issue

Original URL
State: closed
Created a year ago
Comments: 26 (1 by maintainers)

Most upvoted comments

Hi @LawEyez,

An approach to put the 404 page in the app directory is to create an app/[others]/page.tsx file with the following content:

import { redirect } from "next/navigation";

export default async function NotFound() {
    redirect("/404");
}

In this way, any non-existent route will be served by the generic [others] route, which will redirect to /404. The latter will render the content of app/404/page.tsx, whose content you can freely change.

+12

iosifache on Mar 12, 2023

Just create /app/not-found.jsx

https://nextjs.org/docs/app/api-reference/functions/not-found https://nextjs.org/docs/app/api-reference/file-conventions/not-found

+10

elliotgaramendi on Jun 5, 2023

The current issue with the not-found is that it seems somehow throws an error at least on my side and “Link” tag doesn’t work anymore. From the doc, the not-found component doesn’t accept any props like reset() or so. Therefore, if I use not-found, the user need to force refresh the page after clikcing “Link href=”/“>Home</Llink”

So far, dyanmic catch all route seems the best option. And src/pages/404.tsx simply didn’t work for me. Please enlightne me how you are all working around or any.

ElliotHYLee on Apr 20, 2023

Hey.

FYI, you should always link to a reproduction of your issue. It is almost always really difficult to help without.

Back to the question, 404 pages are only handled in the app directory when explicitly calling the notFound() function. Next will then show the closest NotFound page in the tree. To show 404 pages implicitly you need to locate them in the pages folder.

I have it working this way in this reproduction. Take and look and see if you are missing something from this setup 😃

Gawdfrey on Feb 12, 2023

seems not-found.ts working with the latest version for “Link”

ElliotHYLee on Jun 5, 2023

I have the same issue with the not-found.tsx page breaking Link elements.

dstarosta on Apr 25, 2023

Just a quick question, is there a way to add the layout in app to the 404 page in pages?

Not as I am aware of. The way I have done it previously is using _app if I wanted a common layout for both the 500 and 404 pages.

We have to wait until the implicit not found functionality arrives before we share the same layout unfortunately.

Gawdfrey on Feb 13, 2023

@Gawdfrey Thanks for the quick response! And apologies yes, I should have included this.

I checked your link, and mine is setup the same way, and for whatever reason just started working this morning 🤷. Maybe it was serving up a cached version or something.

Going to close this now, thank you for your help!

sebpowell on Feb 13, 2023