'Next JS - Middlewares - Error: URLs is malformed. Please use only absolute URLs

Good Morning! I've been trying for hours how to make redirect page in middleware. I read the documentation and I'm using NextResponse.redirect('/about') and i get a message that: "Error: URLs is malformed. Please use only absolute URLs -"

enter image description here

If I enter the Absolute URL as: http://localhost:3000/about the browser keeps executing the request several times as shown in the image below.

enter image description here

I try this solution in Middleware Relative URLs, but the error persists.

Does anyone have any solution? Thanks.

Here is my code in _middleware.ts:

import { NextResponse } from 'next/server';
import type { NextFetchEvent, NextRequest } from 'next/server';

export function middleware(request: NextRequest, ev: NextFetchEvent) {
  return NextResponse.redirect('/about')
}

The folder and the files localization:

enter image description here



Solution 1:[1]

The new version of next does not allow this anymore, indeed:

next/dist/server/web/utils.js (136:0) @ Object.validateURL

I have not consulted official docs, while my solution was to pass on the origin:

export function middleware(req: NextRequest): NextResponse | null {
  const { pathname, origin } = req.nextUrl

  return NextResponse.rewrite(`${origin}/about`)
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Decebal