Getting host is not configured error when using next/image with TypeScript

Issue

I’m aware that when using Next.js 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?

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"
  ],
};

Solution

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

Answered By – Mic Fung

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published