App directory root not-found.tsx not compiled to 404.html when using static export

[ky28059]

Verify canary release

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

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 18.12.1
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.3.1-canary.4
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

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

App directory (appDir: true), Static HTML Export (output: "export")

Link to the code that reproduces this issue

https://github.com/ky28059/ky28059.github.io

To Reproduce

Run next build, then navigate to the 404 page.

Describe the Bug

Wasn't sure if this qualified as a bug report or feature request, but when running next build with a global app-directory 404 page (root not-found.tsx page), the generated 404.html in /out is Next's default 404 page and not the not-found page.

Expected Behavior

Because /app/not-found.tsx handles unmatched URLs like /pages/404.tsx formerly did, it makes sense for its HTML contents to be compiled to the static export's 404.html instead of being ignored in the build output.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1392

[cmoog]

Seeing this as well.

[moshfrid]

still an issue as of 13.3.1

[shuding]

Since you can have a 404 page inside pages and a not-found file in app at the same time (and they can conflict), we are storing the not-found page in .next/server/app/_not-found.html.

[unleashit]

Same problem as of 13.4.2. Works as expected when running in dev mode, but the 404.html that gets exported is the default black one.

Interestingly, it used to work in production mode when run locally with next start. But in a recent update, it stopping working locally as well. The problem I believe is as mentioned, a not-found.tsx in the app directory root should be exported as 404.html (which is the standard for at least Cloudflare Pages, and probably other hosts).

Have tried the [...not-found] catch-all route trick to call a notFound() function, but (no big surprise) it doesn't work server side on a static site.

[unleashit]

Still ignoring custom not-found.tsx. 404.html is still being exported as the stock 404 page as of version 13.4.4. Any timeline for a fix please?

[unleashit]

Seem to have solved it for now by creating a 404 page (404 directory, with a page.tsx). Doing that exports it as 404.html, which overrides the default. This hack may not work for everyone, but it works for me since I'm hosting on Cloudflare Pages which routes 404s to 404.html.

[SaveliiLukash]

Same issue using the app router's app/not-found.tsx

next dev routes to it correctly
next build + next start also routes correctly

Vercel production and preview builds display the default 404 page (screenshot attached), not app/not-found.tsx

[azizoid]

I received 400kb of error logs in the first 10 minutes

MissingStaticPage [Error]: Failed to load static file for page: /404 ENOENT: no such file or directory, open '/var/www/quran.az/.next/server/pages/404.html'
    at /var/www/quran.az/node_modules/next/dist/server/require.js:153:19
    at async loadComponentsImpl (/var/www/quran.az/node_modules/next/dist/server/load-components.js:68:26)
    at async NextNodeServer.findPageComponentsImpl (/var/www/quran.az/node_modules/next/dist/server/next-server.js:762:36)
    at async NextNodeServer.renderErrorToResponseImpl (/var/www/quran.az/node_modules/next/dist/server/base-server.js:1506:30)
    at async pipe.req.req (/var/www/quran.az/node_modules/next/dist/server/base-server.js:1461:30)
    at async NextNodeServer.pipeImpl (/var/www/quran.az/node_modules/next/dist/server/base-server.js:642:25)

[AugustinMauroy]

Hey! I'd be interested in resolving this issue.
If anyone can just guide me through my first contribution.

[igolskyi]

Still an issue as of 13.4.7

[Cretezy]

The fix in PR #52526 only seems to work to build the root 404.html.

It does not build any not-found pages for subdirectories, which I would consider a bug (and this issue should be reopened).

[styfle]

@Cretezy This issue was created for the "global app-directory 404 page (root not-found.tsx page)". Please create a new issue with the steps to reproduce the problem you're having.

For example, are you using next.config.js with output: 'export' and what other options trailingSlash: true, etc?

I think this could work with trailingSlash: true since it creates directories but its not clear what the expected behavior would be with trailingSlash: false.

So its best to create a new issue with the steps to reproduce the problem, thanks!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.