amplify-hosting
amplify-hosting copied to clipboard
aws-amplify
i18n is not working with domains
Before opening, please confirm:
- [X] I have searched for duplicate or closed issues and discussions.
- [X] I have read the guide for submitting bug reports.
- [X] 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
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?
Hey @chrisbonifacio! The project was set up according to these instructions.
So amplify hosting ist used, but not through the Amplify CLI.
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.
Hi :wave:, 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!
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
@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
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.
@SebastianSchenk @chrisbonifacio I looks like that issue is gone, my app renders correctly with amplify for each language
@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
Hi @glenhayes we're looking deeper into this issue. Thank you for your patience.
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 😅
Hey @hloriana, @chrisbonifacio any news here? Some other folks have been waiting for domain routing to work for a while now: https://github.com/aws-amplify/amplify-hosting/issues/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
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.
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
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.
