使用npx create-react-app创建的Next.js样板代码无法在Netlify部署

注：你可能混淆了工具命令——npx create-react-app用于创建普通React项目，Next.js的官方初始化命令是npx create-next-app，不过这不影响当前问题的解决逻辑。

你遇到的冲突核心在于：Next.js 默认的图片优化加载器依赖 Node.js 服务器运行时来处理图片缩放、格式转换等操作，但 next export 会生成纯静态的 HTML/CSS/JS 文件，没有后端服务器环境支撑，两者的运行逻辑不兼容。

而 Next.js 样板代码默认使用了 next/image 组件（官方推荐的图片优化方案），所以执行静态导出时会触发这个兼容性报错。

有两种可行的修改方案，根据你的需求选择：

方案一：禁用图片优化，适配静态导出 #

如果只需要静态站点，不需要 Next.js 的图片优化功能，可以在项目根目录的 next.config.js 中添加以下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
}

module.exports = nextConfig

这个配置会让 next/image 组件降级为原生 img 标签的行为，不再依赖服务器端的图片处理，这样执行 npm run build && npm run export 就能成功生成静态文件并部署到 Netlify。

方案二：使用 Netlify 的 Next.js 运行时部署（保留图片优化） #

如果想保留 Next.js 的图片优化功能，不需要执行 next export，直接调整 Netlify 的部署命令为：

npm run build

Netlify 原生支持 Next.js 项目的部署，会自动启用 Next.js 运行时来处理服务器端特性，包括图片优化。这种方式不需要修改代码，只需要在 Netlify 控制台的部署设置里更新构建命令即可。

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