Next.js+Express项目禁用自动路由后，如何实现页面路由？

当你禁用useFileSystemPublicRoutes后，不需要手动导入页面文件，也没必要引入react-router——Next.js本身提供了next.render方法，可以让Express路由直接映射到/pages目录下的页面，完美保留你用/pages管理页面的习惯，这也是官方推荐的方案。

步骤1：确认Next.js配置 #

确保next.config.js中已经禁用自动路由：

module.exports = {
  useFileSystemPublicRoutes: false,
}

步骤2：编写Express服务器逻辑 #

在你的服务器入口文件（比如server.js）中，初始化Next.js实例，然后通过Express路由匹配，调用app.render渲染对应页面：

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

// 判断是否为开发环境
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

// 准备Next.js应用
app.prepare().then(() => {
  const server = express();

  // 自定义路由：映射到/pages/users.js页面
  server.get('/users', (req, res) => {
    // app.render参数说明：req, res, 页面路径（相对于/pages）, 路由参数
    return app.render(req, res, '/users', req.query);
  });

  // 动态路由示例：映射到/pages/users/[id].js页面
  server.get('/users/:id', (req, res) => {
    return app.render(req, res, '/users/[id]', { id: req.params.id });
  });

  // 兜底处理所有未匹配的路由，交给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');
  });
});

关键说明 #

• 这种方式完全保留了Next.js的SSR、SSG等核心特性，比引入react-router更轻量化。
• app.render会自动处理页面的渲染逻辑，不需要你手动导入或渲染组件。
• 兜底的server.all('*', ...)可以处理所有你没自定义的路由（比如首页/对应/pages/index.js），避免重复配置。

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