How do you use NextResponse.rewrite() in a Route Handler?

[Fedinjo]

I need to rewrite a response after turning on the draftMode, for this, I set a route handler inside app/api/enable-preview/route.ts
When you call the API it gives an error saying that NextResponse.rewrite() in route handlers is not supported yet.

import {draftMode} from "next/headers";
import {NextResponse} from "next/server";

export async function GET() {
  draftMode().enable();
  return NextResponse.rewrite('/');
}

Do you have any updates on that?

Thank you,

Federico Peloso

[tomvoss]

I have the same question and I'm on the hunt for a better answer. Currently my route handler is throwing this Error:

NextResponse.rewrite() was used in a app route handler, this is not currently supported. Please remove the invocation to continue.

My code:

import { NextResponse } from 'next/server';

export async function GET( request ) {
    // Get the search params from the request
    const searchParams = request?.nextUrl?.searchParams;

    // Get the error from the search params
    const error = {
        type: searchParams?.get( "error" ),
    };

    // Add the error to a custom response header
    if ( error ) {
        request.headers.set( 'x-error', JSON.stringify( error ) );
    }

    // Rewrite to /error
    return NextResponse.rewrite( new URL( '/error', request?.url ) );
}

[Chimochikhin]

Any updates?

[alanhamlett]

https://nextjs.org/docs/app/building-your-application/routing/route-handlers#redirects

[RicFer01]

Any news about this issues?

[petter]

Would be nice to have this functionality! I need to proxy a call to another service and modify the authorization header to work with the third-party service. Something like:

export async function GET() {
  const accessToken = '...'
  return NextResponse.rewrite(
    new URL("http://thirdparty.example/"),
    { headers: { Authorization: `Bearer ${accessToken}` } }
  );
}

[mac2000]

In my case I wanted "catch all" route handler that will proxy requests to github, e.g.: fetch('/user') from client side should be proxied to github api

app/[...slug]/route.ts

import { NextRequest } from 'next/server'
import { cookies } from 'next/headers'

async function handler(req: NextRequest) {
  const url = new URL(req.url)
  const response = await fetch(new URL(url.pathname + url.search + url.hash, 'https://api.github.com/'), {
    method: req.method,
    headers: {
      ...req.headers,
      authorization: `Bearer ${cookies().get('access_token')?.value}`,
    },
    body: req.method !== 'GET' && req.method !== 'HEAD' ? await req.blob() : null,
  })
  const body = await response.blob()
  return new Response(body, {
    status: response.status,
    statusText: response.statusText,
    headers: { ...response.headers },
  })
}

export const GET = handler
export const POST = handler

with this in place, from cliend side I may do something like:

fetch('/user').then(r => r.json()).then(console.log)

as well as

await fetch('/graphql', {method: 'POST',headers: {'content-type': 'application/json'}, body: JSON.stringify({query:'{viewer{login}}'})}).then(r => r.json())

profit

notes:

• the downside of given approach is that we can not pipe request and response bodies, that's why we are forced to read them fully before sending to the client - this one may become a problem for a big payloads, but for something small works perfectly fine
• cookie here is used more for demo purposes and can be passed from client as well or some other technic may be used