Next.js 13.2.4版本：如何移除构建文件夹路径中的_next

要把Next.js构建后build目录里的_next路径去掉，将里面的资源直接放到build根目录，可按以下步骤操作：

1. 调整Next.js配置文件 #

在项目根目录的next.config.js中添加如下配置，确保静态资源的引用路径不依赖_next前缀：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 指定构建输出目录为build（默认是.next，可按需修改）
  distDir: 'build',
  // 静态资源基础路径设为空，让资源直接从根目录加载
  assetPrefix: '',
  basePath: '',
  // 开启静态导出模式，避免依赖Next.js服务器渲染特性
  output: 'export',
  // 静态导出时必须关闭图片优化，否则资源路径会异常
  images: {
    unoptimized: true,
  },
}

module.exports = nextConfig

2. 自动迁移_next目录下的资源 #

构建完成后，build目录里会有_next文件夹和其他静态文件（比如index.html），我们可以通过脚本自动把_next里的内容移到build根目录，再删除_next文件夹。

针对Linux/macOS系统 #

修改package.json的scripts字段：

{
  "scripts": {
    "build": "next build && npm run move-assets",
    "move-assets": "mv build/_next/* build/ && rm -rf build/_next"
  }
}

针对Windows系统 #

修改package.json的scripts字段：

{
  "scripts": {
    "build": "next build && npm run move-assets",
    "move-assets": "move build\\_next\\* build\\ && rmdir /s /q build\\_next"
  }
}

3. 注意事项 #

• 静态导出模式（output: 'export'）不支持API路由、Server Components动态渲染等特性，若项目依赖这些功能，此方法不适用，需自定义服务器来映射资源路径。
• 执行完构建和迁移后，打开build目录下的index.html，检查CSS、JS资源路径是否为根目录（比如/static/css/xxx.css而非/_next/static/css/xxx.css），确保引用正常。
• 若用Node.js服务器部署，需修改服务器配置，让它从build根目录读取静态资源，而非默认的_next目录。

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