aws-amplify / aws-amplify/amplify-hosting

Cloudfront fails to do locale based 404 with Next.js app

Open
#2,321 4 comments 0 reactions 0 assignees View on GitHub
bug ssr
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.