How to redirect to the URL with a trailing slash for the home page?

Current behaviour

It redirects to the URL with a trailing slash except the home route: https://my-domain.com doesn’t redirect to https://my-domain.com/

Expected behaviour

It makes this redirect when trailingSlash: true is set: https://my-domain.com -> https://my-domain.com/ (note the trailing slash).

  • trailingSlash: true is set in the next.config.ts
  • NextJs (14.2.20)
  • project is deployed on Vercel

Hi, @pochka15! Welcome to the Vercel Community :wave:

Your trailingSlash: true setting in next.config.ts should work for most routes, but the home route (/) can be tricky. Here’s a quick solution:

Add this to your next.config.ts:

module.exports = {
  trailingSlash: true,
  async redirects() {
    return [
      {
        source: '/',
        destination: '/',
        permanent: true,
      },
    ];
  },
};

This tells Next.js to explicitly handle the home route redirect. After deploying these changes, https://my-domain.com should redirect to https://my-domain.com/.

Remember to redeploy your app on Vercel after making this change. If you’re still having issues, try clearing your browser cache or testing in an incognito window.

Let me know if you need any more help!

Looks like it doesn’t work. I also thought that maybe redirects() can help me with this problem but after reading docs I couldn’t see how it may be helpful since we specify relative URLs.

Your example leads to a circular reference

@pawlean Could you please take a look at this issue?

Hi, @pochka15! Thanks for your patience.

Could you try:

/** @type {import('next').NextConfig} */
const nextConfig = {
  trailingSlash: true,
  async redirects() {
    return [
      {
        source: '/:path((?!.+\\.[\\w]+$)(?!.*/$).*)',
        destination: '/:path/',
        permanent: true,
      },
    ]
  },
}

module.exports = nextConfig

This configuration does the following:

  1. Keeps trailingSlash: true to handle most routes.

  2. Adds a custom redirect rule that:

  3. Matches any path that doesn’t end with a file extension or a trailing slash.

  4. Redirects it to the same path with a trailing slash.

  5. Includes the home route (/) in this redirect.

After making these changes:

  1. Deploy your updated next.config.js to Vercel.
  2. Clear your browser cache or test in an incognito window to avoid caching issues.

Unfortunately it still leads to “Too many redirects”.

@pawlean May I also ask you if you’re using AI assistants to generate the response? Cause it looks a bit like we’re going circles and there is no idiomatic solution to this problem. Is there a quick guide somewhere on how to ask this kind of questions to the NextJs maintainers directly? Thanks in advance.

I also feel like I’m going in circles because I can’t see your code :sob:

Could you share your repo with me? Or maybe a minimal reproducible example? I’m debugging in the dark right now, and sharing ideas based on what others have asked in the past.

Sure, here’s the project: Github. There’s nothing fancy in it. It’s just a scratch repo generated by the npx create-next-app@14.2.20 next-redirects command. It contains dummy /blog and /news routes and the Next config with the changes you suggested.

On the video I make requests and show that V2 and V3 versions have cyclic redirects (these are just copy-pastes from your comments).

@pawlean Could you please take a look at this issue?

@pawlean Could you please take a look at this issue?

I deployed your code here, and it works for me.

Does this work for you? :slight_smile:

Could you please take a look at the video (Link)? I’ve made requests to the app you’ve deployed. Home page without trailing slash doesn’t redirect to the page with trailing slash.

I’m still not getting yet what you mean by saying that it works for you. Am I missing something?

Let me try to explain it one more time: search engine crawlers detect duplicated content both on https://nextjs-redirects-example.vercel.app/ and https://nextjs-redirects-example.vercel.app (Note: this one is without trailing slash). So I’m trying to fix it and say: when someone goes to the URL without trailing slash then redirect to the URL with trailing slash. So far the deployed version doesn’t make redirects

@pawlean Could you please take a look at this issue?

Hi @pochka15, sorry for the delayed response. I was wondering if there’s a special reason why you need the / at the end? Because what I see from the video: redirecting from “/” to without “/” works and that is a commonly used pattern. I’m curious to learn why you want to keep a trailing “/” for.

@anshumanb this requirement comes from the fact that all our routes end with a trailing slash. That’s why we have trailingSlash: true in the Next config. So we expect that all our routes end with a trailing slash including the home page. And since the home page doesn’t make redirects then our SEO analytics says that we have duplicated content (explained it in the previous comment). - this is what I’m trying to fix

1 Like

@pawlean All right, one more attempt :cold_sweat:. Could you please take a look at this issue?

Hi @pochka15, sorry for the delayed response. We’ve forwarded this issue internally and checking with other folks to see how to achieve this behavior.

I’ll keep you posted here.

2 Likes

Hi @pochka15, after digging in deeper with our teammates. We’ve come to the conclusion that the Next server sees "/" and "" as identical requests, in the same way that new URL("http://example.com").pathname is / . There is no scenario in which a “slashless” root ("" ) is sent. If the server sent a redirect from http://example.com to /, it’d be an infinite loop.

But, the good news is that this shouldn’t be a problem for your website. Based on this Google blog post the root URL with and without the trailing slash are equivalent.

Rest assured that for your root URL specifically, https://example.com is equivalent to https://example.com/ and can’t be redirected even if you’re Chuck Norris.

2 Likes

Much thanks for the reply!

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.