Redirect from https://example.com/ to https://example.com impossible?

[prathamesh-gharat]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/tender-platform-3dzyz4?file=%2Fnext.config.mjs%3A18%2C1&workspaceId=ws_YUkYarDJnXLApfjXgeKQWi

To Reproduce

To reproduce, add a redirect like the following in next.config.js or middleware.
Check the next.config.mjs in the linked codesandbox for reference.

'/' to 'http://localhost:3000' (without the trailing slash)

Someone from the SEO side is requesting to add this redirect ⚠️.

The issue is with the NextResponse.redirect method.

1. https://github.com/vercel/next.js/blob/286c14d0b2ec9129f5d910f00f897c8d12a503c4/packages/next/src/server/web/spec-extension/response.ts#L126C29-L126C40 -> calls validateURL
2. https://github.com/vercel/next.js/blob/286c14d0b2ec9129f5d910f00f897c8d12a503c4/packages/next/src/server/web/utils.ts#L143C12-L143C40

Example output of the code from validateURL.
Code: String(new URL(String('http://example.com')))
Output: http://example.com/ (slash added automatically)

Code: String(new URL(String('http://example.com/test')))
Output: http://example.com/test

Current vs. Expected behavior

Current: Redirect to http://localhost:3000 redirects to http://localhost:3000/ automatically.
Expect: Redirect to http://localhost:3000 should not redirect to http://localhost:3000/ automatically.

Provide environment information

Operating System: Ubuntu 22.04
NodeJS: 20 LTS

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

It happens on all OS/versions. Issue is not related to NextJS but usage of URL?

[syedalinaqihasni]

@prathamesh-gharat

This behavior you're encountering is tied to how the JavaScript URL object works in both the browser and Node.js environments. Specifically, the URL object automatically normalizes URLs by adding a trailing slash if the path is empty. This is not specific to Next.js but to the URL API.

Root Cause

The validateURL method in Next.js uses the URL constructor to validate and normalize the URL. When you pass http://localhost:3000 (without a trailing slash), the URL constructor interprets it as a directory-like structure and appends a trailing slash (http://localhost:3000/).

Here's how this works with the URL API:

const url = new URL('http://localhost:3000');
console.log(String(url)); // Output: 'http://localhost:3000/'

This behavior is by design and adheres to URL standards.

Workaround

To avoid appending a trailing slash when redirecting, you can manipulate the headers directly instead of using NextResponse.redirect. Here's an example of how you might handle it in middleware:

import { NextResponse } from 'next/server';

export function middleware(req) {
  if (req.nextUrl.pathname === '/') {
    return new Response(null, {
      status: 302,
      headers: {
        Location: 'http://localhost:3000', // No trailing slash
      },
    });
  }
}

This approach bypasses the URL constructor, giving you finer control over the Location header.

Explanation for SEO Requests

From an SEO perspective, avoiding or standardizing trailing slashes is typically aimed at preventing duplicate content issues. Ensure your final decision aligns with your SEO strategy, but for redirects, it's usually safe to standardize URLs (either always with or without trailing slashes).