Next.js项目能否访问/public目录外的静态HTML页面？

Next.js 默认只会自动托管项目根目录下 /public 文件夹内的静态资源，直接访问其他目录的静态HTML文件会出现404错误。以下是几种可行的解决方案：

方法一：将静态资源移至/public目录 #

这是最简单的官方推荐方案：

• 把 aboutus 整个文件夹移动到 /public 目录下
• 调整 aboutus/index.html 内的资源引用路径为绝对路径，比如将 ./css/style.css 修改为 /aboutus/css/style.css，图片和JS文件同理
• 重启开发服务后，访问 http://localhost:3000/aboutus 即可正常加载页面

方法二：通过next.config.js配置重写规则 #

如果不想移动文件夹，可以在项目根目录的 next.config.js 中添加重写规则，让Next.js代理请求到指定静态文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      // 匹配/aboutus路径，指向根目录的aboutus/index.html
      {
        source: '/aboutus',
        destination: '/aboutus/index.html',
      },
      // 匹配aboutus下的所有子资源（css/js/images等）
      {
        source: '/aboutus/:path*',
        destination: '/aboutus/:path*',
      },
    ];
  },
};

module.exports = nextConfig;

• 同样需要调整 index.html 内的资源引用为绝对路径（比如 /aboutus/css/style.css）
• 重启开发服务后即可正常访问

方法三：使用自定义Express服务器 #

如果需要更灵活的静态资源托管，可以搭建自定义服务器：

1. 安装依赖：

npm install express

2. 在项目根目录创建 server.js 文件：

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  // 托管根目录下的aboutus文件夹
  server.use('/aboutus', express.static('aboutus'));

  // 处理Next.js的其他路由
  server.all('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

3. 修改 package.json 中的启动脚本：

{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
}

4. 启动服务后，访问 http://localhost:3000/aboutus 即可加载静态页面，此时HTML内的相对路径可以正常使用（比如 ./css/style.css）

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