CODEWITHSUNDEEP
typescriptnext.js
Lee
Lee

Reputation: 113

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

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

Upvotes: 7

Views: 10224

Answers (2)

juliomalves
juliomalves

Reputation: 50358

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']
    }
}

Upvotes: 11

Mic Fung
Mic Fung

Reputation: 5692

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

Upvotes: 0

Related Questions