Next.js静态网站部署的build执行与路由异常问题

我开发的Next.js单页静态网站，要求执行npm run build后生成的out文件夹能直接上传到任意服务器部署（像原生HTML/JS/CSS那样）。比如客户把它部署在www.site.com/mysite/下，我的项目得在www.site.com/mysite/landingPage/正常提供服务，但现在遇到两个核心问题：

• 使用<Link href="/">跳转时，会跳到www.site.com/mysite，而非预期的www.site.com/mysite/（带尾斜杠）
• 子页面（比如about页）当前访问路径是www.site.com/about，预期应为www.site.com/mysite/about
  另外，我不想固定basePath（无法预知客户的部署路径），也尽量不想配置exportPathMaps，如果必须配置得告诉我原因。

1. 修复尾斜杠跳转：直接开启trailingSlash: true，无需exportPathMaps #

Next.js静态导出时，trailingSlash: true会自动为所有页面添加尾斜杠，同时生成对应目录结构的静态文件。只有当你需要自定义导出路径规则（比如修改页面文件名、添加特殊路由）时，才需要配置exportPathMaps，单页或常规多页场景完全不需要额外配置。

2. 动态适配部署路径：用相对路径替代绝对路径 #

既然不能固定basePath，就把所有<Link>组件的href改成相对路径：

• 首页跳转用href="./"代替href="/"
• 子页面（如about）用href="./about"代替href="/about"
  同时保持assetPrefix: "."，确保CSS、JS、图片等静态资源的引用路径是相对当前页面的，不会错误指向服务器根目录。

3. 修正子页面路径问题 #

使用相对路径后，子页面的访问路径会自动基于当前部署的父路径生成。比如部署在www.site.com/mysite/landingPage/时，./about会自动指向www.site.com/mysite/landingPage/about，完全符合预期。

package.json（无需修改，保持现有脚本） #

"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
  "export": "next export",
  "start": "next start",
  "lint": "next lint"
}

next.config.js（修复重复导出+添加尾斜杠配置） #

/** @type {import('next').NextConfig} */
const path = require("path");

module.exports = () => ({
  reactStrictMode: true,
  basePath: "",
  assetPrefix: ".",
  trailingSlash: true, // 关键配置：自动添加尾斜杠，解决跳转路径问题
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
  images: {
    unoptimized: true,
  },
});

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