[Bug]: When using `MiddlewareRequest`, trailing slash redirects stop working

[ryanwalters]

Summary

The use of MiddlewareRequest seems to be causing trailing slash redirects to stop working in some configurations.

I was able to narrow down the configuration for our application to a pretty minimal working and not working example:

The next.config.js used for both working and not working configurations:

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/money',
};

module.exports = nextConfig;

Working middleware.ts:

import { type NextRequest } from 'next/server';
import { type MiddlewareResponse } from '@netlify/next';
import { NextResponse } from 'next/server';

type NextRequestCustom = Omit<NextRequest, 'geo'> & { geo: any };

export async function middleware(nextRequest: NextRequestCustom): Promise<MiddlewareResponse | NextResponse> {
  return NextResponse.next();
}

Not working middleware.ts:

import { type NextRequest } from 'next/server';
import { MiddlewareRequest, type MiddlewareResponse } from '@netlify/next';
import { NextResponse } from 'next/server';

type NextRequestCustom = Omit<NextRequest, 'geo'> & { geo: any };

export async function middleware(nextRequest: NextRequestCustom): Promise<MiddlewareResponse | NextResponse> {
  const request = new MiddlewareRequest(nextRequest);
  const response = await request.next();

  return response;
}

A link to a reproduction repository

https://github.com/ryanwalters/middleware-repro

Expected Result

Url redirects to https://main--thriving-puffpuff-af3b3e.netlify.app/money (no trailing slash)

Actual Result

Url returns a 500 error with the message, Invalid URL: '/money'

Please compare against https://www.britannica.com/money/ which behaves as expected, automatically redirecting to /money without a trailing slash. The only difference between these two branches is that middleware is enabled. The issue is easy to reproduce, but here is an x-nf-request-id just in case you guys need it for debugging purposes: 01H1AA394CRGYR298SB24ATAT8

Steps to reproduce

1. Navigate to https://main--thriving-puffpuff-af3b3e.netlify.app/money/

Next Runtime version

• [email protected]
• @netlify/[email protected]
• @netlify/[email protected]

Is your issue related to the app directory?

• [ ] Yes, I am using the app directory

More information about your build

• [ ] I am building using the CLI
• [X] I am building using file-based configuration (netlify.toml)

What OS are you using?

None

Your netlify.toml file

`netlify.toml`

[build]
    command = "npm run build"
    publish = ".next"

Your public/_redirects file

`_redirects`

# No redirects file

Your next.config.js file

`next.config.js`

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/money',
};

module.exports = nextConfig;

Builds logs (or link to your logs)

Build logs

https://app.netlify.com/sites/thriving-puffpuff-af3b3e/deploys/649350ecedd5790b64b0589e

Function logs

Function logs

# Paste logs here

.next JSON files

generated .next JSON files

# Paste file contents here. Please check there isn't any private info in them
# You can either build locally, or download the deploy from Netlify by clicking the arrow next to the deploy time.

[taty2010]

Hi, @ryanwalters I used the info you provided above, and as you mentioned it doesn't seem like we can reproduce the error on our end. Can you let us know what version of Next you are using?

I will look into this more with the team, but we will most likely need more information to be able to reproduce the issue and try to resolve it.

[ryanwalters]

@taty2010 I was able to pare down our app enough to be a pretty bare-bones repro repo: https://github.com/ryanwalters/middleware-repro

This is currently deployed as https://main--thriving-puffpuff-af3b3e.netlify.app/money/

[p0wl]

hey, we see the same issue on "next": "12.3.4", and "@netlify/plugin-nextjs": "4.40.1",. Any idea or workaround known?

[p0wl]

this is what we see in the logs. I'm trying to find where this comes from, but I can't spot it. I found this place: https://github.com/netlify/next-runtime/blob/main/packages/runtime/src/templates/edge-shared/next-utils.ts#L129, but I don't think that is the right place. Where is this "new NextUrl" called? Within the nextjs package?

[p0wl]

@taty2010 did you manage to find something with your team? We still see this issue

[serhalp]

Hi @ryanwalters

The team at Netlify have now released the new v5 Next.js runtime which has support for both pages and app router, on-demand and time-based revalidation, automatic fine-grained cache control, and automatic image optimization using Netlify's image CDN.

You can find the documentation and additional information on the new runtime here: Next.js on Netlify

The v4 runtime is now in the maintenance support phase with no new features being added. Occasional bug fixes and security patches will be applied when needed.

Thanks!