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

user_16110005 0
Viewed 3534

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

next.js reactjs
1 Answers

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`)
}
user_3925020
Related