Why I get always 'Invalid URL' when I try to redirect with NextResponse from middleware v12.2

[dokata99]

This is my middleware.ts in the root ./middlewate.ts

import { NextResponse, userAgent } from 'next/server';
import type { NextRequest } from 'next/server';
import jwt_decode from 'jwt-decode';
import { IUser } from 'app/interfaces/IUserData';
import cookie from 'js-cookie';

export function middleware(request: NextRequest) {
  const refreshToken = request.cookies.get('refreshToken');
  const idToken = request.cookies.get('idToken');

  if (refreshToken && idToken) {
    try {
      const decodedToken: any = jwt_decode(idToken);
      if (decodedToken) {
        const user: IUser = {
          id: decodedToken.user_id,
          email: decodedToken.email,
          loaded: true,
          provider: decodedToken.firebase?.sign_in_provider,
        };
        console.log(user);
      }
    } catch (error: any) {
      console.log('Invalid token');
    }
  } else {
    const url = request.nextUrl.clone();
    url.pathname = 'auth/login';
    console.log('redirect');

    return NextResponse.redirect(url);
  }
}

export const config = {
  matcher: [
    '/',
    '/media/images',
    '/media/videos',
    '/media/shared',
    '/media/trashed',
  ],
};

When I go to /media/images I get this error. I get the console.log('redirect').

and this is my structure inside /pages

I have all these paths:
'/media/images', '/media/videos', '/media/shared', '/media/trashed',

[icyJoseph]

Hi,

Are you using a custom server? I cannot reproduce this locally.

This error happens when a URL is constructed with invalid arguments, like:

new URL("/"); // TypeError: Failed to construct 'URL': Invalid URL
new URL("/", "ssss"); // TypeError: Failed to construct 'URL': Invalid URL
new URL("//", window.location.origin); // TypeError: Failed to construct 'URL': Invalid URL

This is handled internally by Next.js, and my guess is that the second argument (the origin/host) is missing, or is something like "0.0.0.0", or "localhost", without protocol.

It could also be that the pathname is wrong, but doesn't look like it does it?

Edit

If using nx monorepos, one has to remember that a custom server is created, and therefore, hostname and port have to be passed, as described here nrwl/nx#9126 (comment), copying for ease of use:

"serve": {
      "executor": "@nrwl/next:server",
      "options": {
        "buildTarget": "website:build",
        "dev": true,
        "port": 4200,
        "hostname": "localhost"
      },
...
}

[dokata99]

I use a custom server, yes! i.e not Next api

[icyJoseph]

So something like this? https://nextjs.org/docs/advanced-features/custom-server ?

[icyJoseph]

I guess something is wrong with the server configuration then, please do share it if you can.

[dokata99]

Sure. I'm still trying. I will share more info tomorrow

[dokata99]

Updates:
I build new separate project only with Next.Js. I did the same things.. like folder structure and used the same middleware.ts file. And it's working. i.e if I don't have 'cookies' I get redirected to auth/login. Currently the main project it's build with Nx mono repos. Check here: https://nx.dev/packages/next

So how I'm able to fix this problem...

[icyJoseph]

Are you able to do this? nrwl/nx#9126 (comment)

[dokata99]

Thank you! This solved the problem! Just by default nx set our project with custom server and the hostname is undefined!

[icyJoseph]

Awesome I'll update the other answer! Don't forget to mark as answered.