npm run build后NextJS无法显示public文件夹新增图片的原因

NextJS执行npm run build时，会将public目录下的所有静态资源复制到构建产物目录（如.next/static/media或dist/static/media）。运行时通过API新增到public/images的文件，不会被自动同步到这个构建后的静态资源目录，导致页面请求时找不到对应文件，只有重新构建才会把新文件打包进去。

1. 分离动态上传文件与静态资源目录 #

不要将运行时新增的图片放到public目录，改用以下两种方式：

• 直接上传到云存储服务，页面直接引用云存储的完整URL
• 在项目根目录创建非public的存储目录（比如uploads），通过NextJS的API路由提供图片访问

示例API路由（pages/api/images/[filename].js）：

import fs from 'fs';
import path from 'path';
import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req, res) {
  const { filename } = req.query;
  const imagePath = path.join(process.cwd(), 'uploads', filename);
  
  if (!fs.existsSync(imagePath)) {
    res.status(404).send('Image not found');
    return;
  }
  
  const imageBuffer = fs.readFileSync(imagePath);
  res.setHeader('Content-Type', 'image/png'); // 根据实际图片类型调整
  res.send(imageBuffer);
}

页面中使用/api/images/sss.kopyasi.png作为图片地址即可访问。

2. 运行时手动同步文件到构建产物目录（不推荐） #

如果必须用public目录，新增图片后需手动将文件复制到构建后的静态资源目录，注意不同NextJS版本路径不同：

• NextJS 13+ App Router：./dist/app/_next/static/media
• Pages Router：./.next/static/media

示例复制代码：

import fs from 'fs';
import path from 'path';

const sourcePath = path.join(process.cwd(), 'public/images/sss.kopyasi.png');
const targetPath = path.join(process.cwd(), '.next/static/media/sss.kopyasi.png');

fs.copyFileSync(sourcePath, targetPath);

这种方式需要处理NextJS给静态资源自动添加的哈希后缀，维护成本高，仅临时场景可用。

3. 关闭Image组件的优化功能（临时方案） #

使用NextJS Image组件时，开启unoptimized选项，跳过NextJS的图片优化流程，直接引用原始文件路径：

import Image from 'next/image';

<Image
  src="/images/sss.kopyasi.png"
  alt="示例图片"
  width={500}
  height={500}
  unoptimized
/>

但此方法仅适用于开发环境或非静态部署场景，生产静态部署时运行时新增的public文件不会被同步，仍会失效。

最稳定的方案是将动态上传的图片与public目录的静态资源分离，用独立存储或API路由提供访问，避免依赖NextJS构建阶段的静态资源打包逻辑。

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