I have this simple middleware that rewrites the endpoint to an external api. While this works nice for 200 statuses, when I get another status like 401, I get a white page until the retries reach the limit.

middleware.ts

export async function middleware(req: NextRequest) {
  const requestHeaders = new Headers(req.headers);
  requestHeaders.set("accept-language", "test");

  const pathname = req.nextUrl.pathname;
  if (pathname.startsWith("/api")) {
    const rewriteUrl = new URL(
      pathname,
      "https://b9f7-2a03-4b80-b900-1440-db4-501a-3c6c-8bdf.ngrok-free.app"
    );

    console.log(rewriteUrl.href);
    return NextResponse.rewrite(rewriteUrl, {
      request: { headers: requestHeaders },
    });
  }

  const response = NextResponse.next();
  setSecureHeaders(response);

  return response;
}

page.tsx

export default async function Home() {
  const queryClient = getQueryClient();

  await queryClient.prefetchQuery({
    queryKey: ["intent-users"],
    queryFn: async () => {
      const response = ky("http://localhost:3000/api/intern-users").json();
      return response;
    },
  });

  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <h1>Hello World</h1>
      <Suspense>
        <Users />
      </Suspense>
    </div>
  );
}

Not sure whether I need to handle this in middleware, like making a fetch to the server and only if the response is ok to rewrite next, I am not sure