https://discord.cloudflare.com logo
Join Discord
Powered by
Next 13.4.2, not-found.js, and 404's on Pages
# pages-help
w
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
setup on Next 13.4.2, I created a 
not-found.js
file to return a custom 404 and not the Next default. On my local setup using 
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! 🙂
b
I am going to assume that you are deploying to Pages using 
@cloudflare/next-on-pages
. When you run 
npm run dev
, I imagine it's going through 
next 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
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
. IIRC, there also might be an issue with prerendered routes and 
not-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
w
I appreciate the quick answer. I'll check that out and try to report back. Thanks!
Update: 1. I had been using 
npm run build
as my build step and the default 
/out
directory. On local, this worked but I got the default Next error page on Pages. 2. I changed the build in the Pages dashboard to use 
@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.
Locally, I now get the default 404 and not the custom.
The entire 
not-found.js
file looks like this:
Copy code
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>
  )
}
b
Please add the 
nodejs_compat
compatibility flag in your Pages project settings
Pages project settings -> functions -> compatibility flags
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
w
--compatibility-flag=nodejs_compat
<-- like that?
or just the right hand side?
b
yeah you would include that with your wrangler command when running locally
w
right. I did that when following the docs on the next-on-pages repo
b
When deploying to Pages though, you need to add the compatibility flag in your project's settings on the dashboard and redeploy
w
OK. I added it and I'm waiting for the redeploy now.
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 
NotFound
function in the 
not-found.js
file.
Same behavior on my local system when using the wrangler line from the docs. Original error page, not the custom.
custom error works with 
npm run dev
locally. So maybe something with rewrites? I'm digging but nothing plainly apparent is showing.
b
Are you able to share a reproduction by any chance?
w
like a github repo?
b
Yeah, if it's possible
w
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?
(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)
b
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.
w
yep. we're rebuilding an old site that was getting overwhelmed by moving to static, via Next/Pages.
b
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 🙂
w
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. 👍
b
Sounds good, no worries 🙂
w
OK - this is a problem I caused as I moved from using a 
npm 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-app
too until I updated that to 3.0.0. - Also, in my 
next.config.js
I had 
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.
b
Ah that's irritating, I'm glad to hear you got it all sorted out 🙂
PreviousNext
Powered by