[Bug]: redirecting the user to a localized version of the page does not depend on Accept-Language header and NEXT_LOCALE cookie

[tiffafoo]

See #788 (comment) for resolution and workaround in v3.

Context

This is a bug that happens in version 3. The beta version of the plugin works as expected

If a user prefers the locale fr in their Accept-Language header but has a NEXT_LOCALE=en cookie set to the en locale, when visiting / the user should be redirected to the en locale location until the cookie is removed or expired. (next docs on this here). Some users are reporting that the cookie and header are not working as expected.

https://netlify.zendesk.com/agent/tickets/71454
https://netlify.zendesk.com/agent/tickets/72892

In another thread:

The issue is they are not receiving any cookie inside the Next.js getStaticProps or getServerSideProps

Does this issue only affect customers using the Beta plugin? As it looks like the Enterprise customer that’s having the similar issue is using @netlify/plugin-nextjs@3.9.2 with Next.js 11.1.2

• @MelvinPeepers

Steps to reproduce

• Repro site: https://618e898787cc54da77e495ee--vigorous-lalande-d32aae.netlify.app/ (uses v3 of plugin)
• Expected behavior site: https://vigorous-lalande-d32aae.netlify.app/ (uses the beta)

Repro steps

1. Go to https://618e898787cc54da77e495ee--vigorous-lalande-d32aae.netlify.app/
2. See that the url ends with /
3. Change chrome language to french (Settings -> Advanced -> Language -> Add French -> Move to top)
4. Go to https://deploy-preview-1--vigorous-lalande-d32aae.netlify.app/
5. See that it does NOT redirect to /fr like it does in the beta
6. Go to dev tools and run document.cookie = "NEXT_LOCALE=fr";
7. Refresh
8. See that it does NOT redirect to /fr like it does in the beta

A link to a reproduction repository

https://github.com/tiffanosaurus/next-netlify-starter/tree/test

More information about your build

• I am building using the CLI
• I am building using file-based configuration (netlify.toml)
• I am building using v3 of the plugin

What OS are you using?

N/A deployed via netlify

Your netlify.toml file

https://github.com/tiffanosaurus/next-netlify-starter/blob/test/netlify.toml

[build]
  command = "npm run build"
  publish = "out"

Relevant log output (or link to your logs)

https://app.netlify.com/sites/vigorous-lalande-d32aae/deploys/618e898787cc54da77e495ee

10:34:31 AM: Build ready to start
10:34:33 AM: build-image version: 8925038cf853b22d6397cdcb9904ac88b66bb383 (focal)
10:34:33 AM: build-image tag: v4.5.0
10:34:33 AM: buildbot version: 26b97d2791a6a6b761b2a82710f290ed779fac72
10:34:33 AM: Building without cache
10:34:33 AM: Starting to prepare the repo for build
10:34:33 AM: No cached dependencies found. Cloning fresh repo
10:34:33 AM: git clone https://github.com/tiffanosaurus/next-netlify-starter
10:34:34 AM: Preparing Git Reference pull/1/head
10:34:35 AM: Parsing package.json dependencies
10:34:36 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'out' versus '.next' in the Netlify UI
10:34:36 AM: Starting build script
10:34:36 AM: Installing dependencies
10:34:36 AM: Python version set to 2.7
10:34:37 AM: v16.13.0 is already installed.
10:34:37 AM: Now using node v16.13.0 (npm v8.1.0)
10:34:37 AM: Started restoring cached build plugins
10:34:37 AM: Finished restoring cached build plugins
10:34:37 AM: Attempting ruby version 2.7.2, read from environment
10:34:39 AM: Using ruby version 2.7.2
10:34:39 AM: Using PHP version 8.0
10:34:39 AM: Started restoring cached node modules
10:34:39 AM: Finished restoring cached node modules
10:34:40 AM: Installing NPM modules using NPM version 8.1.0
10:34:46 AM: npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
10:34:46 AM: npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
10:34:49 AM: npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
10:34:50 AM: npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
10:34:54 AM: added 604 packages, and audited 605 packages in 13s
10:34:54 AM: 48 packages are looking for funding
10:34:54 AM:   run `npm fund` for details
10:34:54 AM: 17 high severity vulnerabilities
10:34:54 AM: To address all issues, run:
10:34:54 AM:   npm audit fix
10:34:54 AM: Run `npm audit` for details.
10:34:54 AM: NPM modules installed
10:34:54 AM: Started restoring cached go cache
10:34:54 AM: Finished restoring cached go cache
10:34:54 AM: go version go1.16.5 linux/amd64
10:34:54 AM: go version go1.16.5 linux/amd64
10:34:54 AM: Installing missing commands
10:34:54 AM: Verify run directory
10:34:56 AM: ​
10:34:56 AM: ────────────────────────────────────────────────────────────────
10:34:56 AM:   Netlify Build                                                 
10:34:56 AM: ────────────────────────────────────────────────────────────────
10:34:56 AM: ​
10:34:56 AM: ❯ Version
10:34:56 AM:   @netlify/build 18.21.10
10:34:56 AM: ​
10:34:56 AM: ❯ Flags
10:34:56 AM:   baseRelDir: true
10:34:56 AM:   buildId: 618e898787cc54da77e495ec
10:34:56 AM:   deployId: 618e898787cc54da77e495ee
10:34:56 AM: ​
10:34:56 AM: ❯ Current directory
10:34:56 AM:   /opt/build/repo
10:34:56 AM: ​
10:34:56 AM: ❯ Config file
10:34:56 AM:   /opt/build/repo/netlify.toml
10:34:56 AM: ​
10:34:56 AM: ❯ Context
10:34:56 AM:   deploy-preview
10:34:56 AM: ​
10:34:56 AM: ❯ Installing plugins
10:34:56 AM:    - @netlify/plugin-nextjs@3.9.2
10:35:05 AM: ​
10:35:05 AM: ❯ Loading plugins
10:35:05 AM:    - @netlify/plugin-nextjs@3.9.2 from Netlify app
10:35:06 AM: ​
10:35:06 AM: ────────────────────────────────────────────────────────────────
10:35:06 AM:   1. @netlify/plugin-nextjs (onPreBuild event)                  
10:35:06 AM: ────────────────────────────────────────────────────────────────
10:35:06 AM: ​
10:35:06 AM: Using Next.js 12.0.1
10:35:06 AM: Warning: support for Next.js >=11.1.0 is experimental
10:35:06 AM: The "target" config property must be one of "serverless", "experimental-serverless-trace". Building with "serverless" target.
10:35:06 AM: No Next.js cache to restore.
10:35:06 AM: ​
10:35:06 AM: (@netlify/plugin-nextjs onPreBuild completed in 542ms)
10:35:06 AM: ​
10:35:06 AM: ────────────────────────────────────────────────────────────────
10:35:06 AM:   2. build.command from netlify.toml                            
10:35:06 AM: ────────────────────────────────────────────────────────────────
10:35:06 AM: ​
10:35:06 AM: $ npm run build
10:35:07 AM: > next-netlify-starter@0.5.0 build
10:35:07 AM: > next build
10:35:07 AM: info  - Checking validity of types...
10:35:08 AM: warn  - No ESLint configuration detected. Run next lint to begin setup
10:35:08 AM: info  - Creating an optimized production build...
10:35:17 AM: (node:1496) [DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE] DeprecationWarning: Chunk.hasEntryModule: Use new ChunkGraph API
10:35:17 AM: (Use `node --trace-deprecation ...` to show where the warning was created)
10:35:18 AM: info  - Compiled successfully
10:35:18 AM: info  - Collecting page data...
10:35:22 AM: info  - Generating static pages (0/12)
10:35:22 AM: info  - Generating static pages (3/12)
10:35:22 AM: info  - Generating static pages (6/12)
10:35:22 AM: info  - Generating static pages (9/12)
10:35:22 AM: info  - Generating static pages (12/12)
10:35:22 AM: info  - Finalizing page optimization...
10:35:23 AM: Page                                       Size     First Load JS
10:35:23 AM: ┌ ○ /                                      623 B          72.5 kB
10:35:23 AM: ├   └ css/c8da7e85168b947f.css             177 B
10:35:23 AM: ├   /_app                                  0 B            71.9 kB
10:35:23 AM: └ ○ /404                                   194 B          72.1 kB
10:35:23 AM: + First Load JS shared by all              71.9 kB
10:35:23 AM:   ├ chunks/framework-91d7f78b5b4003c8.js   42 kB
10:35:23 AM:   ├ chunks/main-8669606d1413aabd.js        28.6 kB
10:35:23 AM:   ├ chunks/pages/_app-fb7ecd67e368caea.js  492 B
10:35:23 AM:   ├ chunks/webpack-514908bffb652963.js     770 B
10:35:23 AM:   └ css/fe06b478a6c36e0e.css               349 B
10:35:23 AM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
10:35:23 AM: ​
10:35:23 AM: (build.command completed in 16.3s)
10:35:23 AM: ​
10:35:23 AM: ────────────────────────────────────────────────────────────────
10:35:23 AM:   3. @netlify/plugin-nextjs (onBuild event)                     
10:35:23 AM: ────────────────────────────────────────────────────────────────
10:35:23 AM: ​
10:35:23 AM: Detected Next.js site. Copying files...
10:35:23 AM: ** Running Next on Netlify package **
10:35:23 AM: 🚀 Next on Netlify 🚀
10:35:23 AM: 🌍️ Copying public folder to /opt/build/repo/out
10:35:23 AM: 💼 Copying static NextJS assets to /opt/build/repo/out
10:35:23 AM: 💫 Setting up API endpoints as Netlify Functions in /opt/build/repo/.netlify/functions-internal
10:35:23 AM: 💫 Setting up pages with getInitialProps as Netlify Functions in /opt/build/repo/.netlify/functions-internal
10:35:23 AM: 💫 Setting up pages with getServerSideProps as Netlify Functions in /opt/build/repo/.netlify/functions-internal
10:35:23 AM: 🔥 Copying pre-rendered pages with getStaticProps and JSON data to /opt/build/repo/out
10:35:23 AM: 💫 Setting up pages with getStaticProps and fallback: true as Netlify Functions in /opt/build/repo/.netlify/functions-internal
10:35:23 AM: 💫 Setting up pages with getStaticProps and revalidation interval as Netlify Functions in /opt/build/repo/.netlify/functions-internal
10:35:23 AM: 🔥 Copying pre-rendered pages without props to /opt/build/repo/out
10:35:23 AM: Building 9 pages
10:35:23 AM: 🔀 Setting up redirects
10:35:23 AM: 🔀 Setting up headers
10:35:23 AM: ✅ Success! All done!
10:35:23 AM: Netlify configuration property "functions.*.included_files" value changed to [
10:35:23 AM:   '!node_modules/@next/swc-*/**/*',
10:35:23 AM:   '!node_modules/next/dist/compiled/@ampproject/toolbox-optimizer/**/*'
10:35:23 AM: ].
10:35:23 AM: ​
10:35:23 AM: (@netlify/plugin-nextjs onBuild completed in 66ms)
10:35:23 AM: ​
10:35:23 AM: ────────────────────────────────────────────────────────────────
10:35:23 AM:   4. Functions bundling                                         
10:35:23 AM: ────────────────────────────────────────────────────────────────
10:35:23 AM: ​
10:35:23 AM: Packaging Functions from .netlify/functions-internal directory:
10:35:23 AM:  - next_image/next_image.js
10:35:23 AM: ​
10:35:25 AM: ​
10:35:25 AM: (Functions bundling completed in 2.1s)
10:35:25 AM: ​
10:35:25 AM: ────────────────────────────────────────────────────────────────
10:35:25 AM:   5. @netlify/plugin-nextjs (onPostBuild event)                 
10:35:25 AM: ────────────────────────────────────────────────────────────────
10:35:25 AM: ​
10:35:25 AM: Next.js cache saved.
10:35:25 AM: 
10:35:25 AM: For faster deploy times, build IDs should be set to a static value.
10:35:25 AM: To do this, set generateBuildId: () => 'build' in your next.config.js
10:35:25 AM: ​
10:35:25 AM: (@netlify/plugin-nextjs onPostBuild completed in 86ms)
10:35:25 AM: ​
10:35:25 AM: ────────────────────────────────────────────────────────────────
10:35:25 AM:   6. Deploy site                                                
10:35:25 AM: ────────────────────────────────────────────────────────────────
10:35:25 AM: ​
10:35:25 AM: Starting to deploy site from 'out'
10:35:25 AM: Creating deploy tree 
10:35:25 AM: Creating deploy upload records
10:35:25 AM: 10 new files to upload
10:35:25 AM: 1 new functions to upload
10:35:28 AM: Site deploy was successfully initiated
10:35:28 AM: ​
10:35:28 AM: (Deploy site completed in 2.8s)
10:35:28 AM: ​
10:35:28 AM: ────────────────────────────────────────────────────────────────
10:35:28 AM:   Netlify Build Complete                                        
10:35:28 AM: ────────────────────────────────────────────────────────────────
10:35:28 AM: ​
10:35:28 AM: Starting post processing
10:35:28 AM: (Netlify Build completed in 32.2s)
10:35:28 AM: Post processing - HTML
10:35:28 AM: Caching artifacts
10:35:28 AM: Started saving node modules
10:35:28 AM: Finished saving node modules
10:35:28 AM: Started saving build plugins
10:35:28 AM: Finished saving build plugins
10:35:28 AM: Started saving pip cache
10:35:28 AM: Finished saving pip cache
10:35:28 AM: Started saving emacs cask dependencies
10:35:28 AM: Finished saving emacs cask dependencies
10:35:28 AM: Started saving maven dependencies
10:35:28 AM: Finished saving maven dependencies
10:35:28 AM: Started saving boot dependencies
10:35:28 AM: Finished saving boot dependencies
10:35:28 AM: Started saving rust rustup cache
10:35:28 AM: Finished saving rust rustup cache
10:35:28 AM: Started saving go dependencies
10:35:28 AM: Finished saving go dependencies
10:35:29 AM: Post processing - header rules
10:35:29 AM: Post processing - redirect rules
10:35:29 AM: Post processing done
10:35:29 AM: Site is live ✨
10:35:30 AM: Build script success
10:35:54 AM: Finished processing build request in 1m20.68924748s

[hrishikesh-k]

I've asked the customer for the repo. Waiting for their response.

[nolessafool]

There is an internal note in https://netlify.zendesk.com/agent/tickets/72892 that indicates we might have a testable repo, but since I wasn't involved in creating I'd want @kaganjd or @hrishikesh-k to confirm my guess that that is for this issue, before any work gets done using it.

[hrishikesh-k]

Yeah if it's the latest comment by Jen that you're talking about, then that's related.

[tiffafoo]

So as per the slack thread (internal), this bug is fixed in v4 of the plugin. We do not expect to fix this in v3 as it is not trivial 😞. A workaround in v3 until the beta is stable would be:

1. Manually detect the header Accept-Language and cookie NEXT_LOCALE and redirect accordingly or handle in the client by checking for the cookie there (i.e. document.cookie). Code snippet and example repo below for manually detecting and setting the locale via getServerSideProps
2. Implement a manual locale switcher that is more obvious to the user. This will remove the dependency on the cookie, and can be used as a stop-gap.
3. Use the beta plugin. This potentially comes with a lot of risk, but immediately unblocks you.
   Implement a manual locale switcher. This will remove the dependency on the cookie, and can be used as a stop-gap.

---

Code snippet for option 1

You may have to add this to every page

export async function getServerSideProps(context) {
  const acceptLanguageHeader = context?.req?.headers['accept-language']
  const nextLocaleCookie = context?.req?.cookies?.NEXT_LOCALE
  // Force the locale to be either the NEXT_LOCALE cookie or the Accept-Language header
  const locale = nextLocaleCookie 
  ? nextLocaleCookie
  : acceptLanguageHeader 
    ? acceptLanguageHeader
    : context?.req?.locale || "";

  return {
    props: {
      locale
    },
  }
}

Example repo and deploy preview

Example repo with v3 of the plugin: tiffafoo/next-netlify-starter#2
Example testing instructions and deploy preview from the above repo: https://deploy-preview-2--vigorous-lalande-d32aae.netlify.app/

If you'd like to see the header and cookie working in the beta version, you can look at the main branch of the above repo. The deploy preview for v4 can be found here

cc @wein-hillary @hrishikesh-k @dendeli-work @MelvinPeepers

[hrishikesh-k]

Thanks for the quick fix!