NextRequest and NextResponse

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

If you already have a subscription, you can sign in.

NextRequest and NextResponse

Subscription Required

You must have an active subscription to access this content.
If you already have a subscription, you can sign in.

NextJS extends the web standard Request and Response classes to create NextRequest and NextResponse. These provide additional features for easier api development.

NextRequest

NextJS api handlers actually get passed in a NextRequest instance which is just an extension of the web standard Request class.

It provides additional features e.g. nextUrl (for things like pathname and searchParams) which is demonstrated below.

app/api/route.ts
import { NextRequest } from "next/server";

export async function GET(request: NextRequest) {
const pathname = request.nextUrl.pathname;

const searchParams = request.nextUrl.searchParams;
const name = searchParams.get("name");

return Response.json({
pathname,
searchParams: {
name,
},
});
}

NextResponse

From your api handler, you can return the standard web Response instance, or the extended NextResponse.

As an example we can create a NextResponse using its static redirect method for seamless browser redirection as demonstrated below.

app/api/redirect/route.ts
import { NextResponse } from "next/server";

export async function GET() {
return NextResponse.redirect("https://google.com");
}
javascript
typescript
react
playwright

Enjoy free content straight from your inbox 💌

No spam, unsubscribe at any time.

Transcript

00:00

Next days extends the web standard request and response classes to create next request and next response. These provide additional features for easier API development. Next days API handlers actually get passed in a next request instance, which is just an extension of the web standard request. As a demonstration, let's create a simple API using a route file. We bring in the type for next request and within our get handler, we accept the request and annotate it as next request. Next request is an extension of the standard web request,

00:33

which means that if you only used request overhead, it would still work fine. But the advantage of using next request over here is that we can use the additional APIs provided by next request. One such example is this property called next URL. We can use this for things like reading the current part name or even accessing the past search parameters. From the search parameters, we can read the different values. For example, here we are reading a value name. If it is provided. If it is not provided, then we would get null to demonstrate these values provided by next URL at one time.

01:06

Let's just return them as a part of our response. Let's jump into a risk client to invoke the API and observe the results. If you make a simple request, you can see the path name where this API was mounted, which is slash API. And additionally you can see that currently we did not provide any search parameters. If you make a request with the search parameter, for example, here we are providing the value, John for the parameter name. You can see that it was successfully passed by next URL and it is returned as a part of the payload from your API handlers.

01:38

You can return the standard web response instance or the extended next response. We create another API in another route file, and this time we bring in the class. Next response, we export a simple get handler, and within that we return a next response by using a static method within next response called Redirect. Let's demonstrate that this works fine by using a REST client. First we make a request to redirect and you can see that the server returns a 3 0 7 temporary redirect. With the location set

02:11

to google.com browsers will actually automatically follow this redirect and for the users, they will actually see an immediate request to google.com and we can actually verify this behavior by opening this URL within the browser. And you can see that as soon as you visit this URL, the browser automatically redirects and loads. google.com. As a side note, this is actually how bullion art.com/discord works. It seamlessly redirects you to an invite for our Discord server.