next.js: next/image broken in AWS Amplify for 13.4.13+
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Enterprise
Binaries:
Node: 18.17.0
npm: 9.8.1
Yarn: 4.0.0-rc.48
pnpm: N/A
Relevant Packages:
next: 13.4.13
eslint-config-next: 13.4.13
react: 18.2.0
react-dom: 18.2.0
typescript: 5.1.6
Next.js Config:
output: N/A
note that this is probably not helpful, as it runs locally under this environment
I don't have a way to get details on the amplify hosting environment
Which area(s) of Next.js are affected? (leave empty if unsure)
Image optimization (next/image, next/legacy/image)
Link to the code that reproduces this issue or a replay of the bug
https://github.com/blathersbugs/nextjs-13.4.13-amplify-images-issue-repro
To Reproduce
deploy repository to aws amplify view in browser
you can see it here: https://main.d2qhtpew952tt6.amplifyapp.com/
repository uses dynamically build links (created as static strings) with next/image uses middleware to append locale to url and locale to build url
Describe the Bug
images load as broken links, this worked in 13.4.12 there have been a few bug reports about this breaking in the past.
Expected Behavior
Images load and are optimized
tests should be implemented so this doesn’t keep breaking.
Which browser are you using? (if relevant)
pretty sure this doesn’t matter, but Chrome Version 115.0.5790.171 (Official Build) (64-bit)
How are you deploying your application? (if relevant)
AWS Amplify
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 15
- Comments: 17 (4 by maintainers)
Commits related to this issue
- Downgrading to Next.js v13.4.12 due to image bug https://github.com/vercel/next.js/issues/53872 — committed to mldasco/dasco.me by mldasco a year ago
semantic versioning should be better respected
This should have been at least a minor version update. I don’t see how this is a bugfix.
Downgrading to
13.4.12
indeed fixes the problem on Amplify Hosting. Here is the same app working with that version: https://main.d2lnvvwfrjw6ix.amplifyapp.com. Repo: https://github.com/ferdingler/nextjs-13.4.13-amplify-images-issue-repro/commit/4eacd0220a10153aa4ba4c06e28da114353912f1@pachoclo Yes, Here it is. https://github.com/aws-amplify/amplify-hosting/issues/3641
Also, have this problem - The image component is broken, and sometimes Error 500 on Amplify). Everything works on 13.4.12, but not works from 13.4.13 to the latest version 13.4.19
Also affected by this problem (Image component broken on Amplify hosting – not localhost).
Same here Middleware seems to be ignored