Main page locale switch does not work behind Cloudfront
Answered
Britannia Petite posted this in #help-forum
Britannia PetiteOP
Hi lovely people,
I have just integrated translations into my app. Unfortunately the locale switch does not work in production on the main page. This is only(!) happening
1. On the main page. Every other URL works just fine, for example: https://de.partey.io/info/privacy
1. in production -> dev works flawlessly, but uses the path prefix /de (german) or / for english
2. behind cloudfront. If I use the direct server connect to the origin server and fake the
When I press the language switcher (which is the same component on every page), it just reloads the existing main page in english.
My setup:
* The main page is statically optimized via
* I have https://partey.io for English and https://de.partey.io for German
* Cloudfront is setup:
- will pass the
- has both domains as CNAMEs
* The origin domain in CF is not the same domain as the origin server (which is hosted outside of AWS)
* the origin server would respond to the de and root domain if the Host header were correct
Cache policy for
What I think happens is that the automatic redirect middleware from Next.js is broken if the incoming domain is not partey.io but something different. CF does not seem to allow setting an explicit host header...
Does anybody have ideas how to solve this?
I have just integrated translations into my app. Unfortunately the locale switch does not work in production on the main page. This is only(!) happening
1. On the main page. Every other URL works just fine, for example: https://de.partey.io/info/privacy
1. in production -> dev works flawlessly, but uses the path prefix /de (german) or / for english
2. behind cloudfront. If I use the direct server connect to the origin server and fake the
Host header it works.When I press the language switcher (which is the same component on every page), it just reloads the existing main page in english.
My setup:
* The main page is statically optimized via
getStaticProps* I have https://partey.io for English and https://de.partey.io for German
* Cloudfront is setup:
- will pass the
Host and Accept-Language header to the origin- has both domains as CNAMEs
* The origin domain in CF is not the same domain as the origin server (which is hosted outside of AWS)
* the origin server would respond to the de and root domain if the Host header were correct
Cache policy for
/ and origin request settings are attached.What I think happens is that the automatic redirect middleware from Next.js is broken if the incoming domain is not partey.io but something different. CF does not seem to allow setting an explicit host header...
Does anybody have ideas how to solve this?
Answered by Britannia Petite
I had to disable automatic locale detection and write my own middleware. The problem was, as I suspected, that the host header was not as Next.js expected it to be. This was also due to the way I hosted the application (in docker, behind Nginx which changed the host header).
Now the middleware handles this with the internally used host names.
Now the middleware handles this with the internally used host names.
1 Reply
Britannia PetiteOP
I had to disable automatic locale detection and write my own middleware. The problem was, as I suspected, that the host header was not as Next.js expected it to be. This was also due to the way I hosted the application (in docker, behind Nginx which changed the host header).
Now the middleware handles this with the internally used host names.
Now the middleware handles this with the internally used host names.
Answer