Next.js结合Express动态路由匹配失效，无法获取路径id参数求助

问题原因&修复方案 #

你遇到的问题是3个错误共同导致的：

1. 路由匹配顺序错误
   Express会按照代码编写的从上到下的顺序匹配路由，你把动态参数路由/:id放在了/home、/category固定路径路由前面，会导致访问固定路径时被优先判定为动态id，永远走不到对应的固定路径路由。需要把固定路径路由调整到动态路由前面。
2. 动态参数没有传递到Next.js页面
   Express捕获的动态路由参数存在req.params对象中，你当前的逻辑没有把id合并到查询参数里，对应页面无法拿到id参数。
3. 通配符路由的handle调用参数错误
   app.getRequestHandler()返回的处理函数只需要接收req、res、parsedUrl三个参数，你多传入的"/"参数会导致Next.js路由处理逻辑异常，是所有请求都进入通配符处理的核心原因。

修改后可正常运行的代码 #

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

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
const { parse } = require("url");

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

  // 固定路径路由放在最前面
  server.get("/home", (req, res) => {
    const parsedUrl = parse(req.url, true);
    const { query } = parsedUrl;
    app.render(req, res, "/home", query);
  });
  server.get("/category", (req, res) => {
    app.render(req, res, "/category");
  });
  // 动态参数路由放在固定路由后面
  server.get("/:id", (req, res) => {
    const parsedUrl = parse(req.url, true);
    const { query } = parsedUrl;
    // 把动态id合并到查询参数里，页面可以从query.id拿到参数
    app.render(req, res, "/", { ...query, id: req.params.id });
  });

  server.get("*", (req, res) => {
    const parsedUrl = parse(req.url, true);
    // 修正handle的调用参数
    return handle(req, res, parsedUrl);
  });

  server.listen(port, (err) => {
    if (err) throw err;
  });
});

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