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

Most upvoted comments

semantic versioning should be better respected

This seems to be the change that broke v13.4.13: #52492

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

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).

  • Works fine on 13.4.12
  • Breaks from 13.4.13 (up to 13.4.16)

Same here Middleware seems to be ignored