Prod frontend build failed with Nextjs Image component

[sky4git]

Describe the bug NextJS recent version 10.0.0 included the Image component which does the image optimization automatically. If we use it our NextJS app then frontend build at the deployment with the following error: Error: Image Optimization using Next.js' default loader is not compatible with next export. Possible solutions:

• Use next start, which starts the Image Optimization API.
• Use Vercel to deploy, which supports Image Optimization.
• Configure a third-party loader in next.config.js.

To Reproduce

1. Create a sample NextJS app with latest version.
2. Include Image component.
3. Do the frontend build as per the https://docs.amplify.aws/guides/hosting/nextjs/q/platform/js#git-based-deployments
4. See error

Expected behavior No error should happen or Amplify need to update documentation on what to do when we use Image component.

Code Snippet Please provide a code snippet or a link to sample code of the issue you are experiencing to help us reproduce the issue. (Be sure to remove any sensitive data)

Screenshots

[bobbyhadz]

The next.js Image component introduces some optimizations at runtime, which means a server is required.

Amplify only supports hosting static sites with next export, therefore you can't use the Image component.

[sammartinez]

Thank you for this feedback @sky4git, @bobbyhadz is correct that we currently only support SSR on the client. I have marked this as a feature request.

[KlodAyzak]

@bobbyhadz, do you have any example to share? I have the same issue and I am not able to solve it it.

[bobbyhadz]

@KlodAyzak the next.js Image component is currently not support when deploying with amplify

[cmnstmntmn]

any workarounds around this issue?

[cmnstmntmn]

https://aws.amazon.com/about-aws/whats-new/2021/08/aws-amplify-hosting-support-next-js-version-11/

Image optimization is not working

[eveevans]

I dont understand... the documentation says this: Amplify Hosting supports all the latest Next.js features including incremental static regeneration, automatic image optimization, and script optimization but still gives me the same error

[eveevans]

@cmnstmntmn did you solve this ?

[prestonholt]

My Amplify build (SSR) succeeds with the Image component, but the images fail to load on the live site. It's working in my dev environment

[eveevans]

In my case, was a permission issue on the AWS role (the default Amplify role didnt work, I had to give it more permissions) Now my NextJS 11, on Amplify with a SSG site its working fine.

I have to mention that Im using "build": "next build" for my scripts.

[cmnstmntmn]

@eveevans did you manage to get next-gen image optimization?

[cmnstmntmn]

i'll link this issue i posted on Next JS repo https://github.com/vercel/next.js/issues/28241

[eveevans]

@cmnstmntmn Yes, basically I'm using NextJS 11.1 and all the default configs, except for the Next.js version on amplify in which I changed 9 for latest

Hope you this help you:

Framework

Framework
Next.js - SSR

Next.js version latest

script config:

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

Dependencies:

  "dependencies": {
    "next": "11.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
  },

[cmnstmntmn]

@eveevans indeed, but for a reason or another the image is not converted to the next-gen format.

1. this is the Vercel, all ok https://nextjs-test-seven-ashy.vercel.app/ (the image is converted to webp)
2. same code on AWS: https://main.d79bb4yng9r5p.amplifyapp.com/ (the image is NOT converted to webp)

[carlosriveroib]

@eveevans indeed, but for a reason or another the image is not converted to the next-gen format.

1. this is the Vercel, all ok https://nextjs-test-seven-ashy.vercel.app/ (the image is converted to webp)
2. same code on AWS: https://main.d79bb4yng9r5p.amplifyapp.com/ (the image is NOT converted to webp)

Yes, for me is not converting images too.

On the other hand, I'm using NextJS i18n https://nextjs.org/docs/advanced-features/i18n-routing I have the default locale configured in en and my browser is configured in es. It should redirect to es automatically. It works on Vercel but not in AWS

[calavera]

I am pleased to share we have now launched support for Next.js 12 and 13 image optimization. For more information, please see our blog post at https://aws.amazon.com/blogs/mobile/amplify-next-js-13

If you run into issues with Next.js 12 or 13, please open a new issue so we can track it specifically. Thank you everyone for your patience and support. It's much appreciated.

[github-actions[bot]]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see. If you need more assistance, please either tag a team member or open a new issue that references this one. If you wish to keep having a conversation with other community members under this issue feel free to do so.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.