Remove trailing slash from URLs in Next.Js

Websites which are concerned with SEO usually know that having the URLs like following -
http://movetoabroad.com/about and http://movetoabroad.com/about/ are treated differently by the crawlers.
If you look closely the only difference between the URLs is just the trailing slash. Having these types of URLs creates an issue of duplicate content as crawlers find it pretty difficult to determine the original source.

Here check out this twitter thread

John Mueller is mostly not here 🐀

@johnmu

I noticed there was some confusion around trailing slashes on URLs, so I hope this helps. tl;dr: slash on root/hostname=doesn't matter; slash elsewhere=does matter (they're different URLs)

11:11 AM - 19 Dec 2017

Does it make sense now why your application needs to get rid of trailing slashes?

If you are working in Next.js then there are two ways to fix this

Method 1 -

Well the Next.Js team was aware of this which is why they have an inbuilt provision to handle this you can read about it more here

The idea is to Open next.config.js and add the trailingSlash config:

module.exports = {
  trailingSlash: true,
}

That's it. You are good to go.

Method 2 -

Method 1 discussed above somehow doesn't work at all times or if you are still on an older version of Next.Js. You can see the internet full of discussion around it. So, another method which you can consider especially if you are using a custom server to run the Next.Js application is described below

server.get("*", (req, res, next) => {
  try {
    if (
      req.path.endsWith("/") &&
      req.path.length > 1
    ) {
      let query = req.url.slice(req.path.length);
      // if req.path contains only slashes it means user is trying to access the home page. Check the same using regex and if true redirect him to home page.
      if (/^[\/]+$/.test(req.path)) {
        res.redirect(301, "/" + query);
      } else {
        res.redirect(301, req.path.replace(/\/+$/, "") + query);
      }
    } else {
      next();
    }
  } catch (error) {
    console.log(`Error in redirection ${error}`);
    next();
  }
});

This piece of code simply takes requests and it will check if the URL that the user has accessed ends with a trailing slash or not. If not it will let it continue as it would have without this code. But, if there is a trailing slash we do the following -

1. Save all query parameters. Such that if the user tries to access http://movetoabroad.com/about/?utmSource=Wikipedia we want him to be redirected to http://movetoabroad.com/about?utmSource=Wikipedia which make sure that the query params passed are not affected in any way.

2. We then remove all trailing slashes before the query parameters using regex because who is stopping users from trying to access http://movetoabroad.com/about///? Our regular expression makes sure of that.
   But we have another check that if the user is trying to access home page of the site in that case we will redirect him to home page. Such that http://movetoabroad.com/// redirect to http://movetoabroad.com but you might notice that we are not using the regex to remove all slashes but have added an extra check this is because the second param of res.redirect cannot be empty and if we remove all slashes using req.path.replace(/\/+$/, "") we have an empty sting which will lead to error so we redirect it with a single slash instead using res.redirect(301, "/");

3. Once we have the URL without trailing slashes and our query params received we just merge them to create the updated URL without trailing slashes and permanent redirect (301) on it.