NextJS 覆盖页面路由

在 NextJS 中，我们可以通过覆盖页面路由来实现个性化的 URL 设置和优化 SEO。本文将向您介绍 NextJS 覆盖页面路由的方法。

前置知识

• React
• NextJS 基本使用方法

覆盖页面路由

使用自定义服务端

要覆盖页面路由，我们需要使用自定义服务端。通过自定义服务端，我们可以获取到所有的请求，从而实现个性化的路由设置。

首先，我们需要在项目根目录下创建一个 server.js 文件，用于实现自定义服务端。在 server.js 文件中，我们需要导入 next 和 http 模块，然后创建 next 服务实例并启动服务。

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

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

app.prepare().then(() => {
  http
    .createServer((req, res) => {
      // do something here
      handle(req, res);
    })
    .listen(port, (err) => {
      if (err) throw err;
      console.log(`> Ready on http://localhost:${port}`);
    });
});

在自定义服务端中，我们需要处理请求并将其传递给 next 的处理函数 handleRequest，然后返回响应结果。我们可以在 handleRequest 中获取到请求的 URL，从而实现个性化路由设置。

自定义路由

我们可以使用 server.js 中的自定义服务端来实现自定义路由。自定义路由可以实现页面访问方式的个性化设置，从而优化 SEO。

例如，我们可以通过自定义路由将 /blog/post/10 映射到 /blog?post=10：

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

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

app.prepare().then(() => {
  http
    .createServer((req, res) => {
      const parsedUrl = new URL(req.url, "http://w.w");
      const { pathname, query } = parsedUrl;

      if (pathname === "/blog/post/[id]") {
        const { id } = query;

        app.render(req, res, "/blog", { post: id });
      } else {
        handle(req, res, parsedUrl);
      }
    })
    .listen(port, (err) => {
      if (err) throw err;
      console.log(`> Ready on http://localhost:${port}`);
    });
});

在上面的例子中，/blog/post/[id] 表示一个动态路由，我们可以通过 app.render 函数将其渲染为 /blog 页面，并将 post 参数传递到页面中。

路由参数

我们可以使用 query 来获取 URL 中的参数：

const { id } = query;

当参数是动态参数时，我们必须使用 query.id 来获取参数值：

const query = parse(req.url, true).query;
const { id } = query;

总结

在本文中，我们介绍了 NextJS 覆盖页面路由的方法，并提供了代码示例。通过覆盖页面路由，我们可以实现个性化的 URL 设置，从而优化 SEO。