Intercept externals URLs via Nextjs middleware

[pankajparashar]

My understanding is that Next.js middleware can only intercept internal Routes. This means I cannot use the middleware to embed Auth tokens in the Header and continue the request to External URL (third-party domain).

Is there a technical solution on how it can be achieved?

[Juneezee]

This means I cannot use the middleware to embed Auth tokens in the Header and continue the request to External URL (third-party domain).

Are you trying to do a proxy?

Have you tried using a route.js that embeds the auth token and forwards the request? For example:

export async function GET(request: Request, context: { params: Params }) {
    ...
    fetch("https://example.com/", {
       "Authorization": "my-auth-token",
    });
    ...
}

[pankajparashar]

I did consider using API Route Handlers, but I think I will have to create a lot of routes for each endpoint. In Theory, we'll have 100s of endpoints on the API server.

[lukebussey]

In the middleware you can perform a rewrite to your external API adding new headers:

Add headers:

    return NextResponse.rewrite(
      'https://www.example.com/api',
      {
        headers: {
          'X-New-Header': 'Foo',
        },
      },
    );

Replace headers:

    return NextResponse.rewrite(
      'https://www.example.com/api',
      {
        request: {
          headers: new Headers(
            {
              'Content-type': 'application/json',
              'X-New-Header': 'Foo',
            },
          ), 
        }
      },
    );

[pankajparashar]

The problem here is that middleware does not get called for external domains. If the UI is hosted on abc.com and trying to call an API at example.com, middleware is not invoked.

[lukebussey]

That’s not what middleware is for.