Next.js React应用中省略静态项目路径的index.html并解决资源加载问题

这个问题的核心原因是浏览器解析相对路径的逻辑：当你通过rewrite直接将/project1指向/project1/index.html时，浏览器地址栏仍显示/project1（不带末尾斜杠），它会默认把当前路径视为根目录/，因此页面里的相对路径资源（比如script.js）会被解析为/script.js，而非/project1/script.js。

不需要手动修改静态项目里的所有资源路径，我们可以通过两种优雅的方式解决：

方法一：使用重定向（Redirects）跳转到带末尾斜杠的路径 #

浏览器访问带末尾斜杠的URL（如/project1/）时，会自动将相对路径资源解析为该子目录下的文件。我们可以通过Next.js的redirects配置，将不带斜杠的项目路径重定向到带斜杠的版本，Next.js会自动加载对应的index.html，同时资源路径也会正确解析。

修改你的next.config.ts：

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  async redirects() {
    return [
      // 针对单个项目的配置
      {
        source: "/project1",
        destination: "/project1/",
        permanent: true, // 永久重定向，对SEO更友好
      },
      // 如果有多个静态项目，用动态匹配一次性处理
      {
        source: "/:project(project1|project2|project3)", // 匹配多个项目名
        destination: "/:project/",
        permanent: true,
      },
    ];
  },
};

export default nextConfig;

这样设置后，当你访问localhost:3000/project1时：

1. 浏览器会自动跳转到localhost:3000/project1/，地址栏同步更新
2. Next.js会自动加载/project1/index.html
3. 页面内的所有相对路径资源会被正确解析为/project1/script.js、/project1/style.css等，完全符合预期

方法二：全局开启末尾斜杠（Trailing Slash） #

如果你希望整个Next.js应用的所有URL（包括自有页面和静态项目）都自动添加末尾斜杠，可以直接开启全局配置：

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  trailingSlash: true,
};

export default nextConfig;

开启后，访问localhost:3000/project1会自动重定向到localhost:3000/project1/，同样能自动加载index.html且资源路径正确。但注意这个配置是全局生效的，会影响所有页面的URL格式，需要根据你的整体项目需求选择。

为什么之前的rewrite方案失效？ #

你之前的rewrite是服务器端的路径映射，不会改变浏览器地址栏的显示，导致浏览器对当前路径的判断错误。而重定向（redirect）会让浏览器地址栏更新为带斜杠的路径，浏览器就能正确识别当前的子目录层级，从而自动正确解析所有相对路径资源，完全不需要修改静态项目内部的代码。

备注：内容来源于stack exchange，提问作者Mewtwo 2387