Next.js 13生成静态文件时basePath失效：资源指向根目录而非子文件夹

你的核心问题是配置放错了文件，且tsconfig里的参数设置有误，导致生成的静态资源路径指向根目录。完全可以通过正确配置生成路径正确的静态网站，不需要依赖Node.js或Docker容器部署。

正确配置步骤 #

1. 修正next.config.js（或next.config.ts） #

basePath和assetPrefix是Next.js的专属配置项，必须放在next.config.js（或next.config.ts）里，而非tsconfig.json。同时要添加output: 'export'明确生成静态导出文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/subfolder/subfolder',
  assetPrefix: '/subfolder/subfolder/', // 若部署到域名根目录下的子路径，用相对路径即可；如果是CDN域名再填完整URL
  output: 'export', // 关键：指定生成纯静态导出文件
}

module.exports = nextConfig

注意：如果静态文件部署到https://www.website.com/subfolder/subfolder路径下，assetPrefix用相对路径/subfolder/subfolder/就足够，不需要硬编码完整域名，避免后续迁移麻烦。

2. 修正tsconfig.json #

tsconfig里的baseUrl是用来配置本地模块解析的基础路径，不能填远程URL，应设为当前项目根目录（.），同时删掉不属于TypeScript编译配置的basePath和assetPrefix：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    },
    "baseUrl": "."
  }
}

3. 重新生成静态文件 #

执行构建命令重新生成静态资源：

npm run build

此时/out文件夹内的静态资源路径会自动加上/subfolder/subfolder前缀，比如脚本标签会变为：

<script src="/subfolder/subfolder/_next/static/chunks/webpack-3dedf0bbbe0af454.js" async=""></script>

4. 部署说明 #

将/out文件夹内的所有内容，上传到服务器对应/subfolder/subfolder的目录下（比如Nginx网站根目录下的subfolder/subfolder子文件夹），访问https://www.website.com/subfolder/subfolder即可正常加载页面。

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