Infinite Redirect Loop on 404 Page in Production

[lorenzrabs]

Link to reproduction

No response

Environment Info

Website Template
Payload: 3.0.0-beta.107

Describe the Bug

When visiting a non-existent page (404) in production, the page flickers continuously, suggesting an infinite redirect loop. The browser console shows the following error:

Server Error: NEXT_NOT_FOUND
    at PayloadRedirects (webpack-internal:///(rsc)/./src/components/PayloadRedirects/index.tsx:34:69)

This issue only appears in production mode. In development mode, the error is displayed in the console, but the 404 page loads correctly without flickering.

Reproduction Steps

1. Use the latest website template.
2. Seed the database.
3. Remove the seed page redirect in [slug]/page.tsx.
4. Visit any non-existent page in production mode.

Adapters and Plugins

No response

[akhrarovsaid]

Hey @lorenzrabs,

I'm able to reproduce your issue consistently by building (via npm run build) the app and navigating to a page I know doesn't exist - triggering the 404.

I'm attaching a video of the current behavior. I haven't deployed this application, it's currently running on my local windows machine however I'm able to reproduce your issue with both mongodb and the postgres adapter. I've attached a video of the issue. Looking at console logs indicates it's an RSC problem.

chrome_2024-09-19_18-51-07.mp4

[mikkelwf]

I have this issue in development as well - only difference is that the error is displayed in the console and the screen is blank.

[paulpopus]

Just pushed an update to the website template in #8454

Along with the previous bumping of next canary, payload updates and this I haven't been able to reproduce this issue. Let me know if you do

[szymonjakob]

The issue still exist.
I did test on fresh website template, after your changes @paulpopus .

payload: 3.0.0-beta.110,
next: 15.0.0-canary.160
You have to have at least 1 page with custom slug (other than home).

I assumed that generateStaticParams() in page template doesn't render routes for created pages in cms, during build process, so instead i used getStaticPaths() returning paths with option "fallback: 'blocking'". And routes to my pages are generated, but.. in this case i got infinite redirect loop on Page 404 on production.

export async function getStaticPaths() {
  const payload = await getPayloadHMR({ config: configPromise });
  const pages = await payload.find({
    collection: 'pages',
    draft: false,
    limit: 1000,
    overrideAccess: false,
  });

  const paths = pages.docs
    .filter((doc) => doc.slug !== 'home')
    .map(({ slug }) => ({
      params: { slug },
    }));

  return { paths, fallback: 'blocking' };
}

[paulpopus]

I assumed that generateStaticParams() in page template doesn't render routes for created pages in cms, during build process, so instead i used getStaticPaths

Actually it should still generate static paths at build: https://nextjs.org/docs/app/api-reference/functions/generate-static-params and you'll see these routes in the output during build.

getStaticPaths doesnt work in the app router anymore, it's been replaced by the above: https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#dynamic-paths-getstaticpaths

The pages will be statically generated at build time if you add the following in the page.tsx file while maintaining the previous features:

export const dynamic = 'force-static'

During build you'll see this static indicator

├ ○ /[slug]           <- static
├ ƒ /api/[...slug]    <- dynamic

As for the redirect loop I still haven't been able to reproduce it. But I have found a couple of other bugs that I'll be deploying in a bit.

I will close this issue for now, but if anyone has any further info or reproduction steps we can re-open it or make a new issue and tag me in it, thanks everyone!

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.