如何将 NextJS 重定向用于不区分大小写的路由？

Question

我正在重写一个使用不区分大小写的路由的完整网站。也就是说，有人可以输入：

https://www.siliconvalley-codecamp.com/Presenter/2019/Douglas-Crockford-1124

或

https://www.siliconvalley-codecamp.com/presenter/2019/douglas-crockford-1124

它们都解析到同一个页面。在 NextJS 11 中，我目前正在使用我的 pages 文件夹中的一个文件来解决这个问题：

/pages/presenter[[..slug]].tsx 这意味着我上面提到的第一个 URL 不起作用，但第二个 URL 可以。我也在使用 ISG，所以即使是 slug 也无法正确处理路由。

目前网站建在这里，可以看到行为问题。

工作：

https://svcc.mobi/presenter/2019/douglas-crockford-1124

不工作：

https://svcc.mobi/Presenter/2019/Douglas-Crockford-1124

我查看了此处的文档：https://nextjs.org/docs/api-reference/next.config.js/rewrites，但没有找到一种方法来处理带有 slug 的路线的一般情况。

Answer 1

您使用的是小写文件名。

/pages/presenter[[..slug]].tsx

实际上，您需要 2 个文件。小写和大写。要解决这个问题，可以使用服务端渲染

在根目录server.ts or server.js

import express, { Request, Response } from "express";
import next from "next";

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

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

        server.get("/p/:id", (req: Request, res: Response) => {
            app.render(req, res, "/post", req.params);
        });

        server.all("*", (req: Request, res: Response) => {
            return handle(req, res);
        });
        server.listen(port, (err?: any) => {
            if (err) throw err;
            console.log(`> Ready on localhost:${port} - env ${process.env.NODE_ENV}`);
        });
    } catch (e) {
        console.error(e);
        process.exit(1);
    }
})();

这是服务器端渲染的示例代码。

我认为您可以使用此代码渲染组件

 server.get("/p/:id", (req: Request, res: Response) => {
       app.render(req, res, "/post", req.params);
 });

如果您需要更多信息，请参阅此文档

https://nextjs.org/docs/basic-features/pages#server-side-rendering