Vercel ignore not-found.tsx on NextJS 13

[shahargl]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:20:05 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T8101
    Binaries:
      Node: 19.6.0
      npm: 9.6.4
      Yarn: 1.22.19
      pnpm: 8.5.0
    Relevant packages:
      next: 13.4.3
      eslint-config-next: 13.4.3
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/keephq/keep/blob/main/keep-ui/app/not-found.tsx

To Reproduce

The code is here - https://github.com/keephq/keep/tree/main/keep-ui Specifically, not-found.tsx is here - https://github.com/keephq/keep/blob/main/keep-ui/app/not-found.tsx

Describe the Bug

When running in localhost, the not-found.tsx works:

However, when deploying to Vercel, I get the default 404 page:

Expected Behavior

Vercel should respect the custom not-found.tsx

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Vercel

[4rweb]

I'm encountering a similar issue on my website. Vercel seems to be disregarding my 'not-found.tsx' file. You can see the problem by visiting https://dktsalu.vercel.app/skdhjs

[icyJoseph]

@shahargl the link you gave has no code... it gave me 404 hehe

Anyway, I think you need to delete the pages/404 file, for the app dir not-found take over.

I see no issue going to https://next-js-react-gbg-git-feat-app-router-rsc-icyjoseph.vercel.app/tomato, it loads: https://github.com/icyJoseph/next-js-react-gbg/blob/feat/app-router-rsc/demo-app/src/app/not-found.tsx

[4rweb]

https://github.com/icyJoseph/next-js-react-gbg/blob/feat/app-router-rsc/demo-app/src/app/not-found.tsx

I have not-found.tsx inside /app folder, but not working!

[icyJoseph]

@4rweb do you also have pages/404? Otherwise IDK what could be the issue

[4rweb]

If I put 404.tsx in the folder /pages/404.tsx works! But on /app/404.tsx not working!

[icyJoseph]

No, that's not the way to go.

1. Delete pages/404.tsx
2. Create app/not-found.tsx

That's all there is to it.

What next.js version do you have?

[4rweb]

Using this version: "next": "13.4.4",

I create app/not-found.tsx, and I remove pages/404.tsx, but not working!

Look: https://dktsalu-ax0ypkqnf-informaticadkt.vercel.app/testerror

For some reason that I don't know! Maybe it is the version of NextJS

[icyJoseph]

Wow, that's really strange. I updated to 13.4.4 and I get the 404 page, no problem.

Could there be an issue with your 404?

In your Vercel dashboard, for the https://dktsalu-ax0ypkqnf-informaticadkt.vercel.app/testerror deployment, can you check the Sources Tab? There should be a 404 file, what contents does it have?

In my case I see the 404.

Do you have pages/_error.tsx or pages/500.tsx?

[4rweb]

I can't print it because it is too large, but I copy the text

look to files in the source tab:

_next
blog
icons
_error
a andalan
a andalan-day
andalan-day.rsc
andalan.rsc
blog
blog.rse
busca
busca.rsc
a conheca-outros-metodos-c
conheca-outros-metodos-c
contato
contato.rso
contraceptivos-de-uso-injet
contraceptivos-de-uso-injet
index
index.rse
pilula-de-emergencia
pilula-de-emergencia.rso
politica
politica.rse
termos-de-uso
termos-de-uso.rse
500
Andalan.png
android-chrome-192×192.png
android-chrome-512×512.png
apple-touch-icon.png
bg-404.ong
browsercontig.xmi
favicon-16×16.png
favicon-32x32.png
favicon.ico
logo.png
moon.svg
mstile-150×150.png
safari-pinned-tab.sg
site.webmanifest
sun.svg

I don't have 404 in the source!!!

[icyJoseph]

I think the issue might be that you have pages/_error.tsx try deleting that one.

[4rweb]

Hey @icyJoseph , thank you for your assistance! However, the solution you provided isn't working. I created a /page/404.tsx file, and it's working for https://www.dktsalu.com.br/skdfhjskd/.

The problem is that when the layout.tsx is located in the /app folder, the 404 page ignores the layout. Unfortunately, I need to update this website today, and I don't have much time.

Thank you again for your help!

[icyJoseph]

But I am not saying you should have a 404 page in pages. You must delete it!

All you need is the app/not-found.tsx

What I think might be happening, is that, if you also have pages/_error, which probably takes over app/not-found.tsx - I see in your source that theres an _error page!

So please no pages/404 and pages/_error. Remove both, but do not remove the app/not-found page, keep it!

[shahargl]

@icyJoseph I've renamed not-found.tsx to under-constrcution.tsx since it didn't work anyway. This is the code before the rename: https://github.com/keephq/keep/blob/633bf32b6ba1cd5cc0b2320033f95fe727a14465/keep-ui/app/not-found.tsx

[icyJoseph]

Wow... Mmm there's quite a few moving parts on that repository.

I don't have access to my laptop this weekend. I wonder if you can try to test if the problem is the middleware?

[icyJoseph]

I wonder if the output standalone might be the problem? I haven't tried the not-found page with standalone activated.

[shahargl]

What do you mean by "standalone"? and If you want me to run some checks, let me know.

[icyJoseph]

You have standalone mode activated: https://github.com/keephq/keep/blob/main/keep-ui/next.config.js

Also please take the next@13.4.4 update - hopefully tomorrow I get some time to help out and try different things, and see if we can fix it or create a reproduction repository of the issue

[icyJoseph]

@shahargl did you make any progress on this issue? Did you even test running next build and next start locally? AKA a production build, but locally?

[shahargl]

yes, I did. and it worked, which was super odd for me. I have docker images that use next build and next start where it worked, and deploying it on Vercel didn't. I currently not using not-found.tsx because it was unusable. @icyJoseph

[icyJoseph]

Yeah I tried your project locally and it worked locally, with and without standalone output... I wonder if the multi tenant thing is the issue but I'm not sure. Super suspicious... I'm out of ideas now

[clangerOg]

I'm encountering the same issue, which I described in this #50849 discussion.

Looking at the created source output on Vercel it lloks like there actually is an _error and an 500 file, but I can't seem to find a 404 file.

I could imagine that Next.js skips the generation of this file in some form because of some Vercel settings? I will run a few more tests, but for now I am at a loss.

[clangerOg]

I found out something interesting: I was relatively sure that the not found page was still working in my project up to a certain point. I have now been able to identify that point in time:

Commit feb10a0

The following release is a preview deployment from my commit #feb10a0:

https://orbit-growth-69lrwjrh2-chris23lngr.vercel.app/

If you navigate to a non-existing URL, you get the "not found" page I defined. (Try here)

Commit e568cd0

In the following commit (#e568cd0) I moved the not-found.tsx file to a grouped route:

src/app/not-found.tsx → src/app/(marketing)/not-found.tsx (View here).

You can look at the preview deployment for this commit here. Since then the 404 page does not work, even after I moved the not-found.tsx file back to its original folder (/app). I could imagine that it has something to do with Vercel not registering the route change correctly or being based on an old cache and therefore not generating a 404 page anymore, but this is all just guess work on my part.

[ianbunag]

I wonder if the output standalone might be the problem? I haven't tried the not-found page with standalone activated.

I also encountered this on:

• output export
• build script next build
• start script npx serve@latest out

In dev mode next dev --turbo the root not found page is being served, but on prod mode (build and start) the default 404 is shown.

Source code here https://gitlab.com/yvnbunag/scaffold/-/tree/main/src/templates/web/next-js/mtc (under construction).

[Gideonnn]

I have a similar experience as @ianbunag while having output set to export. Behavior is different when running a dev server compared to doing a production build.

One thing I noticed is that calling notFound from next/navigation does seem to route to the not-found.tsx page.

[Metarock]

Hiya, just wondering if you have any updates with this issue. I am having a similar experience but with error.tsx. Behavior in local environment works as expected however in vercel it is serving the default 500 error page rather than the error.tsx. I've opened up a discussion for it #55130.

[bernardogarza]

Any updates on this? I tried deleting the pages folder completely (I only had an _Error file in there, no 404) but I'm still getting Vercel's 404 page instead of my not-found. As @Gideonnn mentioned, handling it with the not-found() function manually does fallback to the right page.

I'm using next@13.4.19

[Mihir867]

Hi, Anyone any updates on this ?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!