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

user_15081437 0
Viewed 2388

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"
  ],
};
typescript next.js
2 Answers

Next.js will ultimately look for a next.config.js file to get the configurations from (which you most likely don't have if you're using next.config.ts).

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

// next.config.js
module.exports = {
    images: {
        domains: ['images.unsplash.com']
    }
}

From Next.js 12, you can now keep using ES modules by renaming the config file to next.config.mjs. While this isn't exactly the same as using TypeScript, at least you can keep the syntax consistent.

// next.config.mjs
export default {
    images: {
        domains: ['images.unsplash.com']
    }
}
user_18707800

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

user_155694920
Related