aws-amplify / aws-amplify/amplify-hosting
Cloudfront fails to do locale based 404 with Next.js app
- Dominant language
- Dockerfile
- Stars
- 481
- Forks
- 123
- PR merge metrics
- No merged PRs in 30d
Description
### Before opening, please confirm:
- [X] I have checked to see if my question is addressed in the [FAQ](https://github.com/aws-amplify/amplify-console/blob/master/FAQ.md).
- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-console/issues?q=is%3Aissue+).
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-console/blob/master/CONTRIBUTING.md).
- [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
### App Id
dh2ndod2t9wbt/dev/479
### Region
us-east-1
### Amplify Console feature
Not applicable
### Describe the bug
When deploying to amplify, somehow the translated 404 response from the underlying Next.js server is dropped and replaced with an english version of the 404. We have tested the build locally and am unable to reproduce the behavior.
Example test paths
/fr-fr/invalid-page-here-123 => Shows english 404 => BUG
/fr-fr/404 => shows French 404 (only exception) => PROPER
I think there is some Cloudfront configuration or something in the amplify stuff that has an internal rewrite for 404s that misses the locale in the path. I noticed there are significantly varying cloudfront request and response headers between these two routes.
### Expected behavior
The 404 page should respect the locale in the path variables for next.js 404 page to be correctly translated.
/fr-fr/invalid-page-here-123 => Should show French 404
/fr-fr/404 => Should show French 404 (already does and should not change)
### Reproduction steps
1. Go to /fr-fr/invalid-page-here-123
2. Observe english page
### Build Settings
_No response_
### Additional information
_No response_
Contributor guide
Research direction
Reproduce the issue at /fr-fr/invalid-page-here-123 and compare it with /fr-fr/404, including their CloudFront request and response headers. Start by tracing how Amplify Hosting handles Next.js 404 responses and locale paths; done means an invalid localized path returns the translated French 404 without changing the existing /fr-fr/404 behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- aws, next.js
- Domain
- cloud, infrastructure, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100