使用Next.js Image组件遇TypeError：需使用new关键字

这个错误大概率是Next.js的Image组件和Prismic库导出的Image对象命名冲突，或是Prismic的某些全局修改覆盖了浏览器原生的Image构造函数导致的。下面是具体解决方法：

1. 排查导入重名问题 #

检查代码（包括关联组件）是否同时导入了Next.js的Image和Prismic的Image，这类同名导入会直接引发冲突：

// 错误示例：两个同名Image导入导致冲突
import Image from 'next/image';
import { Image } from '@prismicio/react';

解决办法是给其中一个导入重命名：

// 将Next.js的Image重命名为NextImage
import NextImage from 'next/image';

const Test = () => {
  return (
    <>
      {/* 使用重命名后的组件，注意src路径无需加../public/ */}
      <NextImage src="/vercel.svg" layout="fill" objectFit="contain" />
    </>
  );
};

export default Test;

注意：Next.js Image组件引用public目录下的资源时，直接写根路径（如/vercel.svg）即可，无需添加../public/前缀。

2. 修复原生img标签报错问题 #

如果原生img标签也触发错误，说明全局的Image构造函数已被篡改。可以直接使用标准img标签写法，同时检查是否引入了prismic-dom这类旧库——它容易污染全局对象，建议改用@prismicio/react的最新API：

const Test = () => {
  return (
    <>
      <img src="/vercel.svg" alt="Vercel Logo" />
    </>
  );
};

3. 检查Prismic客户端配置 #

确保Prismic客户端初始化没有修改全局对象，优先使用官方推荐的初始化方式：

import * as prismic from '@prismicio/client';

const client = prismic.createClient('你的仓库名称', {
  accessToken: process.env.PRISMIC_ACCESS_TOKEN,
});

export default client;

内容的提问来源于stack exchange，提问作者Aliiii