How to setup language redirect for NextJS?

Support
1

As per the logs, the redirect was loaded correctly:

12:34:37 AM: Netlify configuration property "redirects" value changed to [
12:34:37 AM:   {
12:34:37 AM:     from: '/',
12:34:37 AM:     to: '/es',
12:34:37 AM:     status: 301,
12:34:37 AM:     conditions: { Language: [Array] },
12:34:37 AM:     force: true
12:34:37 AM:   },

However, when I visit the site using the Locale Switcher chrome plugin and the language set to spanish, it does not redirect to /es

Update: the browser seems to be sending a single language in the headers. Here’s the request header for the main URL:

:authority: hilarious-halva-1164eb.netlify.app
:method: GET
:path: /
:scheme: https
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
accept-encoding: gzip, deflate, br
accept-language: es
cache-control: no-cache
pragma: no-cache
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
sec-fetch-dest: document
sec-fetch-mode: navigate
sec-fetch-site: none
sec-fetch-user: ?1
upgrade-insecure-requests: 1
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.80 Safari/537.36

Redirect file is:

/*  /es/:splat  302  Language=es

Update:

2

Found the fix:

  • upgrade to latext nextjs (was previously running v11)
  • disable netlify redirects

Here’s why this works

  • with i18n routing enabled in next.config, under the hood this uses rewrites.
    i18n: {
  defaultLocale: "es",
  locales: ["en", "es"],
},
  • unfortunately, rewrites don’t play well with netlify redirects. The docs say to prefer nextjs rewrites over netlify redirects
  • so we had to remove them
  • note: there’s a current bug in nextjs where it’s not possible to disable these i18n rewrites
1 Like