nextimage doesn't work with cloudfront at all | Next.js | Page 1

kind flower Dec 30, 2022, 5:39 AM

#

next version: 13.1.1 (didn't work in 13.0.1 as well)
Hey guys I recently tried to optimize the site with next/image but it says invalid props everytime. I thought maybe because of some package, and tried with fresh creat-next-app@latest but still it says the same error. please help.

next.config.js:

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

require('dotenv').config();

const withPWA = require('next-pwa');


const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

const removeImports = require("next-remove-imports")();

/*module.exports = (phase, { nextConfig }) => {
  return removeImports({
    ...nextConfig
  });
};*/

module.exports = (removeImports(withBundleAnalyzer(withPWA({
  images: {
    domains: ['dtosvk5k1dc7u.cloudfront.net'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'dtosvk5k1dc7u.cloudfront.net',
      },
    ],
  },
  reactStrictMode: true,
  swcMinify: true,
  rules: {
    "react/display-name": "off",
  },

  env: {
    ACCESS_KEY: process.env.ACCESS_KEY,
    SECRET_KEY: process.env.SECRET_KEY,
    REGION: process.env.REGION,
  },

  pwa: {
    dest: "public",
    register: true,
    skipWaiting: true,
    disable: process.env.NODE_ENV === "development",
  },
}))));


new:
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['dtosvk5k1dc7u.cloudfront.net'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'dtosvk5k1dc7u.cloudfront.net',
      },
    ],
  },
  reactStrictMode: true,
}

module.exports = nextConfig
```js

grizzled vine Dec 30, 2022, 5:47 AM

#

Can you try exporting only the last nextConfig?

tough crater Dec 30, 2022, 5:51 AM

#

For reference I tried this and it works https://github.com/awareness481/next-cloudfront-remotepatterns I dont know where the issue is in your app though.

kind flower Dec 30, 2022, 5:59 AM

#

grizzled vine Can you try exporting only the last nextConfig?

doesn't work @tough crater 😦 , can it be because of the way cloudfront is configured?

tough crater Dec 30, 2022, 5:59 AM

#

Did you try my repo locally? 🤔

#

Just to make sure it works for u

#

I dont think its a cloudfront configuration issue since it's next/image giving u the error

kind flower Dec 30, 2022, 6:08 AM

#

tough crater Did you try my repo locally? 🤔

your repo works mate

tough crater Dec 30, 2022, 6:09 AM

#

Ok.. so what could be going wrong in your case? I presume your project isnt public on github right?

#

(Actually could you make a new repo with your config and the image and upload it on github?)

kind flower Dec 30, 2022, 6:14 AM

#

tough crater Ok.. so what could be going wrong in your case? I presume your project isnt publ...

Yes its not public. Sure will do!

#

mate I found the problem

#nextimage doesn't work with cloudfront at all