#External Images (S3) are broken on NextJS 13.3

2 messages · Page 1 of 1 (latest)

sweet trail
#

Update: Problem is in version 13.3.0. Possible solution: downgrade to 13.2.4. Sources: https://github.com/aws-amplify/amplify-hosting/issues/3428 and https://github.com/vercel/next.js/issues/48173

I have updated my project from version 12 to 13, and deployed it to AWS Amplify. But doing so broke all profile images which are hosted on S3.

I have two versions of the app on Amplify right now, one is running on version 12 and the other is running on version 13. On version 12, images are being displayed (see first image). On version 13, they are not being displayed (see second image). On opening Chrome dev tools, there is a 500 server error in console.logs() (see third image).

My next.config.ts file:

/** @type {import('next').NextConfig} */

// This uses phases as outlined here: https://nextjs.org/docs/#custom-configuration
module.exports = () => {

  return {
    reactStrictMode: true,
    images: {
      domains: ['youvouch-image-beta.s3.amazonaws.com']
    }
  }
}

I have experimented with remotePatterns as well. But same results:

/** @type {import('next').NextConfig} */

// This uses phases as outlined here: https://nextjs.org/docs/#custom-configuration
module.exports = () => {

  return {
    reactStrictMode: true,
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'youvouch-image-beta.s3.amazonaws.com',
          port: '',
          pathname: '**',
        },
      ],
    },
  }
}

And here is my component which houses the NextJS Image component:

import Image from 'next/image';
export default function CircleImage({ width, minWidth, height, src, className }: CircleImageProps) {
    return (
        <div className={`center ${className}`} style={{ width: width, height: height, minWidth: minWidth }}>
            <Image src={src} alt='profile-image' width={width} height={height} />
        </div>
    )
}

Can anyone point out if I am missing something or doing something wrong?

fleet rose
#

Try putting remotePatterns within images object like below.


/** @type {import('next').NextConfig} */

// This uses phases as outlined here: https://nextjs.org/docs/#custom-configuration
module.exports = () => {
  return {
    reactStrictMode: true,
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'youvouch-image-beta.s3.amazonaws.com',
          port: '',
          pathname: '**',
        },
      ],
    },
  }
}