Internationalized (i18n) Routing + Rewrites doesn't work properly when deployed on Vercel Now

[kivohin]

Bug report

Describe the bug

Given below folder structure:

├── _app.jsx
├── _document.jsx
└── stock.jsx // (Uses getStaticProps to fetch data from Google API)

And below next.config.js:

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = ({
  i18n: {
    locales: ["en", "es", "fr"],
    defaultLocale: "en",
  },
  async rewrites() {
    return [
      /**
       * We need to define a no-op rewrite to trigger checking all pages/static files
       * before we attempt proxying.
       */
      {
        source: "/:path*",
        destination: "/:path*",
      },

      // English
      {
        source: "/en",
        destination: 'https://old-website.com',
      },
      {
        source: `/en/about`,
        destination: 'https://old-website.com/company',
      },
    

      // Spanish
      {
        source: "/es",
        destination: 'https://old-website.com/es',
      },
      {
        source: `/es/about`,
        destination: 'https://old-website.com/es/company',
      },
   

      // French
      {
        source: "/fr",
        destination: 'https://old-website.com/fr',
      },
      {
        source: `/fr/about`,
        destination: 'https://old-website.com/fr/company',
      },
    ];
  },
});

A website which is being migrated over to Next.js page by page uses the Rewrites feature, when used in combination with the new Internationalized Routing feature, and when deployed to Vercel Now, the Rewrites don't work properly.

Once deployed on Vercel Now the root pages display the Directory Listing page, i.e. on:

• vercel-url.com
• vercel-url.com/es
• vercel-url.com/fr

On the rest of the Rewrites the 404 page is displayed, i.e. on:

• vercel-url.com/about
• vercel-url.com/es/about
• vercel-url.com/fr/about

Only the migrated over pages/stock.jsx page loads correctly.

However above Rewrites do work correctly when running on localhost.

To reproduce

• Setup a small Next.js web app with above pages structure, and above next.config.js configuration.
• Substitute https://old-website.com in next.config.js with the website of your choice.
• Run the Rewrites locally and you will see that they work.
• Deploy the web app on Vercel Now, and discover how the Rewrites don't work correctly.

Also I prepared a demo repository in which you can reproduce the errors, and play with the next.config.js to see the effects:
https://github.com/kivohin/i18n-routing-rewrites-vercel-now

Expected behavior

When using Rewrites feature, in combination with the new Internationalized Routing, and being deployed on Vercel Now, the Rewrites should work correctly.

System information

• OS: macOS 10.15.6
• Browser: Google Chrome 86.0.4240.80
• Version of Next.js: 10.0.3
• Version of Node.js: 12.16.3
• Deployment: Vercel Now

Additional context

Above bug report uses Next.js 10.0.2-canary.18, but I also used v10.0.1 with the Rewrites feature, in combination with the new Internationalized Routing and it wouldn't work at all even on localhost. It seems some fixes have been introduced so far on the Canary 10.0.2 releases.

Maybe #18927 fixed the issue on locahost.

Also I attempted to add the locale: false in each Rewrite as suggested here:
Rewrites with i18n support

But that didn't work either.

Thank you in advance 🙏 Keep up the great work! 👏

[kivohin]

I updated my project to latests Next.js v10.0.2 stable release, but issue still happens.

[ijjk]

Hi, it looks like the above routes are trying to handle the / route for each locale which will require allowing a trailing slash to be present on Vercel currently e.g.

{
  source: "/en(/|)",
  destination: 'https://old-website.com',
},
{
  source: "/fr(/|)",
  destination: 'https://old-website.com/fr',
},

I'm not able to reproduce any issues with the non-index rewrites e.g. /en/about so if you are still seeing problems with those routes using locale: false a repo with a minimal reproduction will be needed to investigate further

[kivohin]

Hi @ijjk, thank you for following up.

I prepared a demo repository in which you can reproduce the errors, and play with the next.config.js to see the effects:
https://github.com/kivohin/i18n-routing-rewrites-vercel-now

Also it is deployed on Vercel Now:
https://i18n-routing-rewrites-vercel-now.vercel.app/

I have found these results so far:

• When not using (/|) on the root source, i.e. source: "/en", and not using locale: false, the rewrites work correctly on localhost but not on Vercel Now, seeing above described issues.
• When using (/|) on the root source, i.e. source: "/en(/|)", and using locale: false, the rewrites don't work correctly anymore on localhost (I get 404's on the rewrites, only the Next.js page works, i.e. /stock.js). However the deployment on Vercel Now do start working, but only on the non root pages, i.e. /es/about. The root pages deployed on Vercel Now doesn't do the rewrite correctly, i.e. /es.

As a side note, the Next.js Link component throws some errors on localhost, not sure why, I implemented it as suggested in the documentation, maybe another bug, which I can report in a different issue if anything.

Hope this helps 🙂

[kivohin]

Hi @Timer, @ijjk, any news on this issue?

Just updated to 10.0.3-canary.2 and described bug is still happening.

Thank you.

[timneutkens]

This issue in the current iteration (sprint).

[lipoolock]

If it could help to solve this one, I have a similar issue with "simple" use case explained here #19482
it is deployed on codesandbox but does the same on local environment

[kivohin]

@timneutkens, @ijjk just FYI, in the attached demo repository when clicking on any of the Next.js <Link />'s on the /stock page, the following error is thrown TypeError: Expected "nextInternalLocale" to be a string.

Issue has already been reported here by another user: #19521

[ijjk]

Hi, thanks for the demo repo, I opened a PR here to address some issues I noticed while investigating this which appears to have resolved the problems encountered here. I deployed a working version of your demo here with a minor tweak to the external site being rewritten to. Note: the destination must contain the locale when using locale: false otherwise it will 404 on Vercel (documentation PR here).

[raulfdm]

Hey @ijjk

Last week I had opened a similar issue #19690 also reporting this problem.

I saw that your PR got merged and launched within next@10.0.4-canary.2 but I still couldn't make it work. Can you check if I'm doing something wrong of if it's some edge case? So I can either close this issue or leave it open.

Thanks in advance :)

[kivohin]

Hey @ijjk

Last week I had opened a similar issue #19690 also reporting this problem.

I saw that your PR got merged and launched within next@10.0.4-canary.2 but I still couldn't make it work. Can you check if I'm doing something wrong of if it's some edge case? So I can either close this issue or leave it open.

Thanks in advance :)

Hi @raulfdm,

Updating to next@10.0.4-canary.2 did work for me, now all described issues have been solved both on localhost and when deployed on Vercel Now 😃

I just took a look at your issue #19690, and since you inverted the defaultLocale from pt to en, if what you want to do is redirect your users from the old pt URL, i.e. /blog/e-o-coronavirus-hein to the new one, i.e. /pt/blog/e-o-coronavirus-hein, then what you need is the below config (remember when using locale: false you need to prefix with the locale both the source and destination):

module.exports = {
  async redirects() {
    return [
      {
        source: "/en/blog/e-o-coronavirus-hein",
        destination: "/pt/blog/e-o-coronavirus-hein",
        locale: false,
        permanent: true,
      },
    ];
  },
};

The only thing with this approach is that users trying to get to the en home page will always be redirected, no matter what their browser language is, I would suggest not using the redirect at all, and rely on the Automatic Locale Detection for users to land on pt automatically.

Related ocumentation:
https://nextjs.org/docs/api-reference/next.config.js/redirects#redirects-with-i18n-support

[raulfdm]

Hey @kivohin , thank you for the answer.

Yes, if I do like this, for some posts I have the same article in Portuguese and English, everyone's who just tries to reach the english version gets redirected to portuguese version and that's not exactly the behaviour.

I'm might being innocent here but I was really expecting redirect works like _redirects file, 1-1 config. "If reaches this page, redirects directly to this one" but it seems more complicated than that. 🤔

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.