How to use NextJS redirects for case insensitive routes?

Question

I'm rewriting a complete site that worked with case insensative routes. That is, someone can type:

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

or

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

and they both resolve to the same page. In NextJS 11, I currently am using a file in my pages folder as follows to resolve this:

/pages/presenter[[..slug]].tsx which means that the first URL I mention above will not work, but the second one will. I'm using ISG also so that even the slug does not handle routing correctly.

Currently, the site is built here and you can see the behavior problem.

working:

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

Not working:

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

I've looked at the docs here: https://nextjs.org/docs/api-reference/next.config.js/rewrites but don't see a way to handle the general case of a route with a slug.

Yes, I'm using ISR nextjs.org/docs/basic-features/… on almost all my pages (thousands of them) which prevents me from using a server.js to do the remapping I believe. — Peter Kellner

Expressd3v Expressd3v · Accepted Answer · 2021-08-08T14:37:23

You are using the lowercase file name.

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

In fact, you need 2 files. lowercase and uppercase. To solve this issue, you can use the server-side rendering

on root directory 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);
    }
})();

This is an example code for the server-side rendering.

I think you can render a component with this code

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

If you need more info, please refer this documentation

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

How to use NextJS redirects for case insensitive routes?

1 Answers