Support for Internationalized (i18n) automatic locale detection

[ArianHamdi]

Before opening, please confirm:

• [X] I have checked to see if my question is addressed in the FAQ.
• [X] I have searched for duplicate or closed issues.
• [X] I have read the guide for submitting questions.
• [X] I have removed any sensitive information from my code snippets and submission.

App Id

d2kp69mengqx1w

AWS Region

us-east-1

Amplify Hosting feature

Deployments, SSR

Question

Our next.js 13 application is being migrated to the new amplify hosting compute platform. We need to configure cloud front for two reasons: 1: to redirect "domain.com/restApi/*" to the API gateway so that they won't be resolved in Amplify Hosting. 2: to get the 'Accept-Language' header in middleware to display the website in the user's preferred language.

We previously added path behavior to cloudfront to point "/restApi/*" to an API gateway and let cloudfront distribution allow "Accept-Language" header.

As of now, amplify has full control over cloudfront and we are unsure how to resolve this issues.

Thanks in advance

[github-actions[bot]]

This has been identified as a feature request. If this feature is important to you, we strongly encourage you to give a 👍 reaction on the request. This helps us prioritize new features most important to you. Thank you!

[ghost]

Hi @ArianHamdi 👋🏽, thanks for raising this question and explaining your use case for these configurations. We do not support modifications to the CloudFront distribution at this time since it is managed by Amplify with the new compute platform. However, we are tracking this as a feature request.

[ArianHamdi]

Hi @hloriana. Amplify support for Next.js SSR points to automatic locale detection, but I was not able to implement it.

next.config.js has a localeDetection option that automatically redirects users to their preferred language, but the feature does not work on Amplify.

It seems to rely on Accept-Language header, which seems to be blocked by Amplify (It's unclear to me).

On introduce amplify for next.js, I'm not sure why automatic locale detection is added if this header is blocked.

//next.config.js

i18n: {
    locales: ["en", "sv"],
    defaultLocale: "en",
    localeDetection: true
}

Please let me know if this comment needs a new issue.

[vafPER]

@hloriana Do you have any updates about the headers? Http request headers like "Accept-Language" or "Referer" seems not to be passed through Amplify Host. We are stuck in development after migrating our front end to Amplify.

[vafPER]

@hloriana It's hilarious and at the same time sad that we got to know today that what was written in AWS Amplify doc was wrong and Automatic locale detection for Next Js is not supported yet. At least we managed to make them correct their official page :

https://docs.aws.amazon.com/amplify/latest/userguide/ssr-Amplify-support.html

so no other team falls into the trap of spending days on finding the cause of an error which is written wrongly as a supported feature.

[burkayanduv]

Are there any updates on this?

Everything was seamless for hosting Next.js app with Amplify until we have learned the accept-language headers were stripped off from requests by CloudFront and there is no way to configure this behavior. We will stick with Vercel until this one is fixed. Hope this issue is resolved in a timely manner.

[gstrobl]

Any updates for this feature?

[mdillgen]

+1 This feature request is very important and the lack of language detection (in my case handled by middleware inside of Next.js 14) is what is currently holding me back from hosting on amplify.

[snaps-jacob]

try 'cloudfront-viewer-country' field but it is not perfect.