i18n is not working with domains

[SebastianSchenk]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Next.js

Amplify APIs

Not applicable

Amplify Categories

hosting

Environment information

# Put output below this line
 System:
    OS: macOS 11.3.1
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Memory: 278.45 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.5 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.24.0 - /usr/local/bin/npm
    Watchman: 2021.09.13.00 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 94.1.30.86
    Chrome: 94.0.4606.81
    Edge: 94.0.992.50
    Firefox: 93.0
    Safari: 14.1
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @babel/core:  undefined ()
    @headlessui/react: ^1.4.1 => 1.4.1 
    @heroicons/react: ^1.0.4 => 1.0.4 
    @testing-library/jest-dom: ^5.14.1 => 5.14.1 
    @testing-library/react: ^12.1.2 => 12.1.2 
    @types/jest: ^27.0.2 => 27.0.2 
    @types/node: ^16.10.3 => 16.10.3 
    @types/react: 17.0.27 => 17.0.27 
    @types/react-copy-to-clipboard: ^5.0.2 => 5.0.2 
    @types/smoothscroll-polyfill: ^0.3.1 => 0.3.1 
    @vercel/nft:  undefined ()
    amphtml-validator:  undefined ()
    arg:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    autoprefixer: ^10.3.7 => 10.3.7 
    axios: ^0.21.4 => 0.21.4 
    babel-jest: ^27.2.4 => 27.2.4 
    bfj:  undefined ()
    cacache:  undefined ()
    ci-info:  undefined ()
    classnames: ^2.3.1 => 2.3.1 (2.2.6)
    cli-select:  undefined ()
    comment-json:  undefined ()
    compression:  undefined ()
    conf:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    cross-spawn:  undefined ()
    css-loader:  undefined ()
    debug:  undefined ()
    devalue:  undefined ()
    escape-string-regexp:  undefined ()
    eslint: 7.32.0 => 7.32.0 
    eslint-config-next: 11.1.2 => 11.1.2 
    eslint-config-prettier: ^8.3.0 => 8.3.0 
    file-loader:  undefined ()
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    framer-motion: ^4.1.17 => 4.1.17 
    fresh:  undefined ()
    glob:  undefined ()
    gzip-size:  undefined ()
    http-proxy:  undefined ()
    identity-obj-proxy: ^3.0.0 => 3.0.0 
    ignore-loader:  undefined ()
    is-animated:  undefined ()
    is-docker:  undefined ()
    is-wsl:  undefined ()
    jest: ^27.2.4 => 27.2.4 
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    mini-css-extract-plugin:  undefined ()
    nanoid:  undefined ()
    neo-async:  undefined ()
    next: 11.1.2 => 11.1.2 
    ora:  undefined ()
    popmotion: ^10.0.1 => 10.0.1 (9.3.6)
    postcss: ^8.3.11 => 8.3.11 (8.2.15)
    postcss-flexbugs-fixes:  undefined ()
    postcss-loader:  undefined ()
    postcss-nested: ^5.0.6 => 5.0.6 
    postcss-preset-env:  undefined ()
    postcss-scss:  undefined ()
    prettier: 2.4.1 => 2.4.1 
    react: 17.0.2 => 17.0.2 
    react-copy-to-clipboard: ^5.0.4 => 5.0.4 
    react-dom: 17.0.2 => 17.0.2 
    react-horizontal-scrolling-menu: ^2.5.0 => 2.5.0 
    react-share: ^4.4.0 => 4.4.0 
    react-share-social: ^0.1.48 => 0.1.48 
    react-test-renderer: ^17.0.2 => 17.0.2 
    recast:  undefined ()
    resolve-url-loader:  undefined ()
    sass-loader:  undefined ()
    schema-utils:  undefined ()
    semver:  undefined ()
    send:  undefined ()
    smoothscroll-polyfill: ^0.4.4 => 0.4.4 
    source-map:  undefined ()
    storyblok-js-client: ^4.1.5 => 4.1.5 
    storyblok-react: ^0.1.2 => 0.1.2 
    string-hash:  undefined ()
    strip-ansi:  undefined ()
    swiper: ^7.0.9 => 7.0.9 
    swiper_angular:  0.0.1 
    tailwindcss: ^2.2.16 => 2.2.16 
    terser:  undefined ()
    text-table:  undefined ()
    typescript: 4.4.3 => 4.4.3 
    unistore:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    zen-observable:  undefined ()
  npmGlobalPackages:
    @angular/cli: 9.1.4
    @azure/static-web-apps-cli: 0.6.1
    @nestjs/cli: 6.8.4
    bower: 1.8.8
    create-next-app: 10.2.3
    gulp: 4.0.2
    n: 2.1.12
    npm: 7.24.0
    serverless: 1.50.0
    yarn: 1.22.10

Describe the bug

When using domain based i18n in Nextjs, the hosted version always returns the global default language regardless of the configuration specified for a domain.

It works locally, so I assume it has something todo with the lambda edge functions that are being deployed alongside the files for SSR support.

Expected behavior

Deliver correct defaultLanguage according to next.config.js configuration based on the domain.

Reproduction steps

Deploy an nextjs app with domain specific i18n configuration.

Code Snippet

// Put your code below this line.
module.exports = {
  reactStrictMode: true,

  i18n: {
    localeDetection: false,
    locales: ['en', 'de'],
    defaultLocale: 'en',

    domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en',
      },
      {
        domain: 'example.de',
        defaultLocale: 'de',
      }
    ],
  },
}

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[chrisbonifacio]

Hi @SebastianSchenk 👋 Thanks for raising this issue. I don't see that you're using any Amplify packages in your project. Are you using Amplify for the i18n library or for hosting? Or both?

[SebastianSchenk]

Hey @chrisbonifacio! The project was set up according to these instructions.

So amplify hosting ist used, but not through the Amplify CLI.

[chrisbonifacio]

Oh okay, I just took a look at the Next.js documentation and see that you're trying to use the i18n routing feature. This would have more to do with hosting and the way redirects are configured on the console than the JS library. I'll transfer this issue over to the console repo for better support.

[github-actions]

Hi 👋, thanks for opening! While we look into this...

If this issue is related to custom domains, be sure to check the custom domains troubleshooting guide to see if that helps. Also, there is a more general troubleshooting FAQ that may be helpful for other questions.

Lastly, please make sure you've specified the App ID and Region in the issue!

[dqunbp]

@SebastianSchenk
Hi!
I have the same issue.
I have running my app with Vercel and Amplify.
Domain routing didn't works with the Amplify only.
region=us-east-1
arn:aws:amplify:us-east-1:479336677459:apps/d2617fmgdtfzyf

[SebastianSchenk]

@dqunbp thanks for verifying with Vercel!

[dqunbp]

@SebastianSchenk any updates?

[SebastianSchenk]

No, nothing new here. I ended up not using the i18n domain feature and instead, changed the default language based on the brunch in CI/CD. This means I have one prod branch for each language. This workaround is quite tedious, but it helped me passing by this problem.

[dqunbp]

@SebastianSchenk @chrisbonifacio
I looks like that issue is gone, my app renders correctly with amplify for each language

[glenhayes]

@chrisbonifacio, Wondering if there have been any updates to this issue. I am running into the same problem when hosting with Amplify and using Next.js' i18n functionality for locale switching between domains. I tested the functionality on Vercel, where it works as intended but not on Amplify it is serving the wrong locale.
The issue seems related to pages that share the same path for different locales

[ghost]

Hi @glenhayes we're looking deeper into this issue. Thank you for your patience.

[marnixhoh]

Is there any update on this? I would love to use AWS Amplify to host nextjs, but I can't make the switch without support for domain based routing 😅

[dowrow]

Hey @hloriana, @chrisbonifacio any news here? Some other folks have been waiting for domain routing to work for a while now:
#2340
Looks like theres an issue with Cloudfront ommitting headers needed for the redirect to work, yet you explicitly list you support domain routing here: Internationalized (i18n) domain routing

Am I missing something here? I'm reproducing the same bug in app d1jx07rvivs0st us-east-1

[ArianHamdi]

Hey @hloriana, @chrisbonifacio any news here? Some other folks have been waiting for domain routing to work for a while now: #2340 Looks like theres an issue with Cloudfront ommitting headers needed for the redirect to work, yet you explicitly list you support domain routing here: Internationalized (i18n) domain routing

Am I missing something here? I'm reproducing the same bug in app d1jx07rvivs0st us-east-1

Actually it is not the first time they add an unsupported feature into supported feature here 😄

Also that is related to auto locale detection.

I want to know is this issue is exist for you guys ? because I couldn't setup domain routing.

[ArianHamdi]

No, nothing new here. I ended up not using the i18n domain feature and instead, changed the default language based on the brunch in CI/CD. This means I have one prod branch for each language. This workaround is quite tedious, but it helped me passing by this problem.

It is a good workaround. as we have a amplify app for each domain I added default lcoale in env variable and use that directly in i18n.defaultLocale

[procopym]

Does anyone have a workaround for this issue?
Is there an option to set forwarded header for Amplify App?
Amplify apps doesn't appear in CloudFront so it is not possible to make any configurations at that level.

[calavera]

This feature has just been supported with our latest launch! I'm closing this issue as it's been resolved.

Check out the details here: https://aws.amazon.com/blogs/mobile/cdn-caching-improvements-for-better-app-performance-with-aws-amplify-hosting/

[github-actions]

This issue is now closed. Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.

[github-actions]

This issue has been automatically locked.