How to make URL path case insensitive - NextJs/JS

Question

I am using NextJs and I want to make my URL's case insensitive. Currently due to the fact I am fetching my paths from an API all my paths start with a capital letter. For example www.mysite.com/About. I want the /About to redirect to the same page regardless of whatever case each letter is put in.

Example: Is there an Easy way to have

/About
/about
/aBoUT

All redirect to the same page?

Within my website I have CSR, SSR and SSG. So please take that into account. Furthermore, Id prefer to avoid middleware's if that's at all possible.

I have seen some talk on NextJs redirects function but haven't really gotten a good explanation of how to do the above as of yet. That is my preferred solution.

write some custom middleware which formats all the incoming request URLs to lowercase. Read nextjs.org/docs/advanced-features/middleware — Xiduzo
– Xiduzo, Commented Sep 21, 2022 at 19:05

Cauan Goes · Accepted Answer · 2022-09-22 08:53:46Z

If you are only want that for one or a few pages you can use rewrites elegantly

{
        source: '/(a|A)(b|B)(o|O)(u|U)(t|T)',
        destination: '/about',
}

Rewrite accepts some regex patterns but the "to lowercase" regex expression don't seems to be one of them (at least I couldn't)

You can always generate the rewrites at build time ( I don't recommend more than a middleware only if you have a few pages and performance is super sensitive )

Can you add your reasons to not use a middleware ? Middleware seems the way to go: If you are using Next.JS >=12 you can use custom middleware.

Create file named middleware.js under root folder and use this code:

import { NextResponse } from 'next/server';

const Middleware = (req) => {
  if (req.nextUrl.pathname === req.nextUrl.pathname.toLowerCase())
    return NextResponse.next();

  return NextResponse.redirect(new URL(req.nextUrl.origin + req.nextUrl.pathname.toLowerCase()));
};

export default Middleware;

dansidorkin · Accepted Answer · 2022-09-21 17:23:28Z

0

You can standardize your output from your API to lowercase using

.toLowerCase()

on your string output.

answered Sep 21, 2022 at 17:23

dansidorkin

32 bronze badges

1 Comment

Time2learnagain Over a year ago

yes but I am not really looking for this. I am looking more for using the redirect feature in NextJs.

Collectives™ on Stack Overflow

How to make URL path case insensitive - NextJs/JS

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related