使用Node静态托管Next.js构建产物时遇路由问题求助

问题根源 #

你当前的配置存在两个核心问题：

1. Next.js 默认npm run build生成的是SSR/SSG产物，并非纯静态资源包，直接复制server/pages下的index.html无法正确加载前端路由所需的chunk资源。
2. Express路由优先级设置不当，静态资源服务与fallback路由的匹配逻辑导致前端路由无法正常工作。

解决方案步骤 #

1. 正确导出Next.js静态资源包

执行Next.js的静态导出命令，生成完整的静态产物：

npm run build && next export

执行完成后，项目根目录会生成out文件夹，里面包含所有静态资源（HTML、JS、CSS、图片等）。

2. 调整Express配置

将out文件夹的内容复制到Node项目的public目录下（比如命名为next-static），然后修改app.js的配置：

const express = require('express');
const path = require('path');
const app = express();

// 优先挂载Next.js静态资源目录，确保所有静态文件能被正确访问
app.use(express.static(path.join(__dirname, 'public', 'next-static')));

// 你的业务API路由放在这里
// app.get('/api/user', (req, res) => { ... });

// 所有非API、非静态资源的请求，返回Next.js的入口index.html（支持前端路由）
app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'public', 'next-static', 'index.html'));
});

app.listen(3000, () => console.log('服务启动在3000端口'));

关键说明 #

• 用next export生成的静态产物包含了前端路由所需的所有资源，能确保点击链接时加载对应路由的chunk文件。
• 使用app.get('*')而非app.use作为fallback路由，能保证静态资源和API路由优先匹配，避免被fallback逻辑拦截。

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