Nextjs: typescript 下一个/图像

Question

我知道在使用没有typescript的nextjs图像组件时，需要在next.config.js中配置url。 但我不确定为什么这不适用于 typescript。

“....，未在next.config.js中的图像下配置查看更多信息： https://nextjs.org/docs/messages/next-image-unconfigured-host”

什么是解决方法？ 还是我使用常规 img 标签的唯一选择？

• 项目清单

图像组件：

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

下一个.config.ts

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

Answer 1

我认为您最好在 typescript 项目中使用next.config.js来配置 next 而不是next.config.ts 。 这应该是.js中唯一的文件。

如果你坚持使用next.config.ts ，可以参考这个issue 。

但同样，有些可能会减慢启动时间，有些仍然要求您同时拥有next.config.js和next.config.ts

Answer 2

Next.js 最终将查找您可能没有的next.config.js文件。

要么将.ts配置编译为.js配置，要么直接创建next.config.js文件。

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