[i18n] preview redirects are failing with non-default locales

[tino-junge]

Describe the bug

Hi 👋

I'm currently experiencing issues using the preview mode with non-default locales on deployed Netlify builds.

My current setup uses NextJS (10.0.6) with next-on-netlify (2.8.7) and Contentful as a CMS. When successfully deployed to netlify, the i18n routing and content preview both work individually, however not in combination. When trying to access a non-default locale while in preview mode, the site runs into an infinite loop of failed redirect attempts.

When testing the preview functionality locally running a dev server the redirect issue doesn't appear, so I'm wondering if it is related to the function generation of next-on-netlify.

To Reproduce
Steps to reproduce:

1. Setup a NextJS + Netlify + Contentful CMS project
2. Add i18n support e.g. via next.config.js

// next.config.js

module.exports ={
  i18n: {
    locales: ['en-US', 'pl'],
    defaultLocale: 'en-US',
  },
  target: 'serverless',
}

3. Configure preview URLs similar to https://github.com/vercel/next.js/blob/canary/examples/cms-contentful/pages/api/preview.js

4. Configure preview url on contentful e.g. https://<SITE_NAME>.netlify.app/api/preview?secret=<SITE_SECRET>&redirectUrl=%2F

5. Visit preview url, which works fine for default_locale en_US

6. Open console log or network tab and observe GET https://<SITE_NAME>.netlify.app/pl net::ERR_TOO_MANY_REDIRECTS

Versions

• Next: 10.0.6
• next-on-netlify: 2.8.7

[lindsaylevine]

@tino-junge hey tino! thanks so much for opening this detailed issue. unfortunately, after a lot of tinkering, i haven't been able to repro what you're experiencing. what you're reporting is likely super specific to the page type of whatever you're trying to preview, your exact logic, setup, etc. that said, i have to ask you to build/share a barebones deployable repo that reproduces your issue exactly :/. i know this may seem impossible given that you're using contentful, but at this moment, i don't believe this is connected to contentful; i believe this could be reproduced with the exact logic you're using in your api/preview and directly visiting the "broken" url in preview mode. i encourage you to try to repro it without contentful.

apologies i can't be more helpful without an exact repro :( let me know and feel free to ask whatever in the meantime!

[tino-junge]

@lindsaylevine hi lindsay, thanks for looking into that. I realised that our preview setup might be quite custom and therefore hard to reproduce. I'll try to get a sample setup working and share it with you soon.

[tino-junge]

Hey @lindsaylevine, I finally got a sample setup ready for review:

I've created a fresh Next + Netlify project (based on your netlify starter kit, thanks cassidoo!). When I've added my custom Contentful preview setup and NextJS i18n-routing I was able to reproduce the issue.

When visiting the the production site, the i18n routing works fine (by clicking on the locales).
However when using our content preview url, it only works for the default locale. When using the non-default locale pl it spins in infinite redirects. You can observe a few redirects in the network tab before it times out. Content preview for the non-default locale does work on localhost though.

You can have a closer look at the implementation of the preview functionality in the sample repo.

Let me know if that's enough context. I'd be curious to understand if it could also be my setup which is causing the issue.

Links
Production: https://nostalgic-ride-32aba8.netlify.app/
Preview URL: https://nostalgic-ride-32aba8.netlify.app/api/preview?secret=local-test-secret&redirectUrl=%2F
Repo: https://github.com/tino-junge/next-netlify-contentful

[lindsaylevine]

@tino-junge just saw this! can confirm i also see the infinite redirects; thank you so much for taking the time to put this together!! will dig into shortly and keep you updated :)

[lindsaylevine]

@tino-junge ok so! i know what's going on and where it's going wrong in the source, but i'm not entirely sure why at this moment or how exactly to move forward.

this line is true only for non-default locale root routes (aka /pl or /fr etc). when shouldAddLocalePrefix is true, it passes a condition (this same condition therefore fails for non-root routes like /pl/static) and sets up a 307 (aka the infinite redirects we're seeing for /pl).

therefore, my understanding is that your bug only exists for /pl (and for pages where you have a Link to /pl because the Link tries to prefetch unless you set prefetch to false) in preview mode (aka when we SSR your page with this 307 logic instead of serving the pre-rendered html).

like i said earlier, it's unclear to me right now why this is needed on vercel / why/how this works on vercel. for the record, i was able to strip out the contentful bits of the repo you shared while keeping the reproduction of the bug (see commit). if you can confirm this is in fact only an issue for you on root non-default locale routes in preview mode, that would be helpful in the meantime! (aka, can you successfully visit a page /pl/some/other/route in preview mode?)

will circle back once i have another update!

[tino-junge]

Hey @lindsaylevine, thanks for your update on that. Yes I can confirm: the redirect bug within preview mode only occurs actually on the index page for /pl, but works fine for other routes like pl/features

[lindsaylevine]

for transparency on the issue (even though tino already knows what's up :)):

this issue vercel/next.js#21943 was opened on vercel/next.js but i didn't want to link to it directly given that this is a netlify-specific project :/ i've confirmed with tino that patching next.js resolves the issue he reported here (#164). if you'd like the same workaround until next.js maintainers respond or until we can figure out a better, longer term solution, see it here: lindsaylevine/next-netlify-contentful@456f265 and let me know if you have any issues!

[lindsaylevine]

fixed per vercel/next.js#22445 :) shoutout to jj from vercel/next.js for fixing it!