Nextjs : typescript next/image

Question

I'm aware that when using nextjs image components without typescript, the url needs to be configured in next.config.js. but i'm not sure why this doesn't work with typescript.

"...., is not configured under images in your next.config.js See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host"

what's the workaround? or is my only option to use a regular img tag?

• List item

image component:

  <Image
        src="https://images.unsplash.com/photo-1621794279356-0150106a4b45?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1"
        alt="blog title"
        width="100"
        height="100"
      /> 

next.config.ts

export const images = {
  domains: [
    "images.unsplash.com"
  ],
};

Answer 1

I think you should better use next.config.js for configuring next instead of next.config.ts in typescript project. This should be the only file to be in .js .

If you insist to use next.config.ts , you can refer to this issue .

But again, some may slow down the boot up time, and some still require you to have next.config.js alongside with next.config.ts

Answer 2

Next.js will ultimately look for a next.config.js file, which you probably don't have.

Either you compile your .ts config to a .js config, or simply create a next.config.js file instead.

module.exports = {
    images: {
        domains: ['images.unsplash.com']
    }
}