Next 13.4.2, not-found.js, and 404's on Pages

Hi all - I have successfully been publishing pages w/ a Next.js setup for a few months and things are great, except....

With the new

appDir

appDir

appDir

appDir setup on Next 13.4.2, I created a

not-found.js

not-found.js

not-found.js

not-found.js file to return a custom 404 and not the Next default. On my local setup using

npm run dev

npm run dev

this works correctly and gives me my custom page.

On Pages, it returns the Next default error message and not the custom page.

Given that it works locally, I'm wondering what might be creating this weird behavior. I couldn't find anything searching here or on the Next GitHub issues, so if anybody has seen this I'd appreciate a pointer. Thanks!

James•5/21/23, 11:58 AM

I am going to assume that you are deploying to Pages using @cloudflare/next-on-pages@cloudflare/next-on-pages.

When you run

npm run dev

npm run dev

, I imagine it's going through next devnext dev. If so, things will function as expected as that uses Next.js' own dev server and routing implementation. If you would like to test what things are like locally, you can build with @cloudflare/next-on-pages@1@cloudflare/next-on-pages@1 and then start up wrangler.

Anyway, if you're getting an unexpected 404 page, I would hazard a guess that you might be using the older version of next-on-pages - v0.10.1. You could check your build command and/or devdeps to confirm this, but that old routing system doesn't support many things that are required for the app directory and new Next.js versions to function as expected. If you are on an old version, please try switching to @cloudflare/next-on-pages@1@cloudflare/next-on-pages@1.

IIRC, there also might be an issue with prerendered routes and not-foundnot-found when using next-on-pages, but I cannot recall exactly, so it's quite likely that you'll also need to opt your page into the edge runtime for it function properly too, but I might be wrong about that part - been a while since I last tried one.

I have a modified version of the app directory demo deployed with working custom not found route-level pages that you see at:
https://app-playground-xnd.pages.dev/not-found/clothing/does-not-exist

WulflokOP•5/21/23, 12:00 PM

I appreciate the quick answer. I'll check that out and try to report back. Thanks!

WulflokOP•5/21/23, 3:21 PM

Update:

I had been using
```
npm run build
```
```
npm run build
```
as my build step and the default /out/out directory. On local, this worked but I got the default Next error page on Pages.
I changed the build in the Pages dashboard to use @cloudflare/next-on-pages@1@cloudflare/next-on-pages@1 as suggested (actually, used the presets from the drop-down). This worked but now I get a new error for 404s.

Error: Could not access built-in node modules, please make sure that your Cloudflare Pages project has the 'nodejs_compat' compatibility flag set.

Error: Could not access built-in node modules, please make sure that your Cloudflare Pages project has the 'nodejs_compat' compatibility flag set.

WulflokOP•5/21/23, 3:21 PM

Locally, I now get the default 404 and not the custom.

WulflokOP•5/21/23, 3:22 PM

The entire

not-found.js

not-found.js

file looks like this:

export default function NotFound() {
  return (
      <div className="dark:text-gray-300">
        <h2>Not Found</h2>
        <p>Could not find requested resource</p>
        <a href="/">Return to the home page</a>
      </div>
  )
}

export default function NotFound() {
  return (
      <div className="dark:text-gray-300">
        <h2>Not Found</h2>
        <p>Could not find requested resource</p>
        <a href="/">Return to the home page</a>
      </div>
  )
}

WWulflok Update: 1. I had been using `npm run build` as my build step and the default `/o...

James•5/21/23, 3:22 PM

Please add the

nodejs_compat

nodejs_compat

compatibility flag in your Pages project settings

James•5/21/23, 3:22 PM

Pages project settings -> functions -> compatibility flags

James•5/21/23, 3:23 PM

After that you'll need to redeploy, but you should be able to access the site. The new versions of Next.js depend on asynclocalstorage, and v1 of next-on-pages introduces proper, required support instead of the partial support we had before

WulflokOP•5/21/23, 3:23 PM

--compatibility-flag=nodejs_compat--compatibility-flag=nodejs_compat <-- like that?

WulflokOP•5/21/23, 3:24 PM

or just the right hand side?

James•5/21/23, 3:24 PM

yeah you would include that with your wrangler command when running locally

WulflokOP•5/21/23, 3:24 PM

right. I did that when following the docs on the next-on-pages repo

James•5/21/23, 3:25 PM

When deploying to Pages though, you need to add the compatibility flag in your project's settings on the dashboard and redeploy

WulflokOP•5/21/23, 3:25 PM

OK. I added it and I'm waiting for the redeploy now.

WulflokOP•5/21/23, 3:32 PM

The error from the 404 page is gone, but it's now returned to the default Next error and not the placeholder content I have in the NotFoundNotFound function in the

not-found.js

not-found.js

file.

WulflokOP•5/21/23, 3:32 PM

Same behavior on my local system when using the wrangler line from the docs. Original error page, not the custom.

WulflokOP•5/21/23, 3:35 PM

custom error works with

npm run dev

npm run dev

locally. So maybe something with rewrites? I'm digging but nothing plainly apparent is showing.

James•5/21/23, 3:35 PM

Are you able to share a reproduction by any chance?

WulflokOP•5/21/23, 3:36 PM

like a github repo?

James•5/21/23, 3:39 PM

Yeah, if it's possible

WulflokOP•5/21/23, 3:40 PM

I'll have to step away for a bit. Thanks for the help for the moment. A custom 404 isn't super critical for this small project I'm handling today, but will be important on another project that's looking to break a billion visits a year, this year. I'd say we can close this if you let me know how to use my Enterprise sub with that larger project to get help directly for this? We can share repos there, and so on. Is there a best way to get in touch with a Pages expert through our support contract?

WulflokOP•5/21/23, 3:40 PM

(I'm basically doing some research in advance of the need, for that massive site...as it's easier to deal with the small stuff with a trial project)

James•5/21/23, 3:43 PM

Well, if it's specifically about running Next.js on Pages and using next-on-pages, chances are, I might be the best person to speak to

. But for Pages in general, you should be fine to reach out to someone through support, or the Discord/community forum if need be.

WulflokOP•5/21/23, 3:44 PM

yep. we're rebuilding an old site that was getting overwhelmed by moving to static, via Next/Pages.

James•5/21/23, 3:45 PM

I do find it interesting that a custom error page isn't working for you though considering I have a demo one deployed, and it's possible it's an issue we need to investigate and make changes to our build-time processing to deal with, so if you do at all get a chance to create a reproduction, even if it's as little as just the specific route with all info stripped out, it would be very much appreciated

WulflokOP•5/21/23, 3:46 PM

will do, but that won't be until I'm back to my desk at work. I'll try 'starting from scratch' with a new project deployed to a new pages setup and see if it reproduces. if so, i'll share. thanks for all the help. I appreciate it.

James•5/21/23, 3:46 PM

Sounds good, no worries

WulflokOP•5/22/23, 2:26 AM

OK - this is a problem I caused as I moved from using a npm next buildnpm next build comment to the cloudflare next-on-pages tool. But for your future reference:

I was on an older version of wrangler (2.6.2) and things were broken with a fresh create-next-appcreate-next-app too until I updated that to 3.0.0.
Also, in my next.config.jsnext.config.js I had output: 'export'output: 'export' which caused the next-on-pages watch command to endlessly loop. removing that fixed the loop.

So this was a case of getting all my versions and dependencies updated, and removing old stand-alone next commands or left-overs in config files. Blah.

James•5/22/23, 8:03 AM

Ah that's irritating, I'm glad to hear you got it all sorted out

Next 13.4.2, not-found.js, and 404's on Pages

Similar Threads

Similar Threads

Similar Threads