How do have strongly typed Route Handlers in Next.js 13 beta

[darwin403]

Summary

Currently, API handlers have partial typescript support that makes strongly typed responses and requests easy to write. However with the new Request and Response APIs: (https://beta.nextjs.org/docs/routing/route-handlers) I'm not sure how to strongly type my endpoints.

Is building a custom wrapper for Request, Response the only way to go about or is this something that Next.js 13 (beta) has already got covered?

Thanks!

Additional information

No response

Example

No response

[icyJoseph]

Yeah, you can't really pass type parameters to these, to make sure that you call for example NextResponse.json({}), with the right thing.

And yeah, you can just use import {NextRequest, NextResponse} from 'next/server';, to get some goodies like access to request.nextUrl Or in the case of NextResponse the ability to call it with a json payload already. Maybe you could extend NextRequest?

import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  console.log(request.nextUrl.searchParams.get("foo"));
  // I guess you want to type guard that this is called with `{message: string}` shapes
  return NextResponse.json({ message: "Hello, Next.js!" });

}

[darwin403]

Oh, I see! But NextRequest and NextResponse don't take parameters as well! They just extend Request and Response objects apparently. I'm actually looking for something similar to NextApiResponse<Data> which provides a parameter Data to specify the type of expected response. https://nextjs.org/docs/basic-features/typescript#api-routes

[icyJoseph]

Yeah that's what I meant to say. Currently there's no way to pass type params to either.

[ToyB0x]

For your reference, here is an example 😄

type Response = {
   message: string
}

export async function GET() {
  NextResponse.json<Response>({ message: "hello" });
}

[zahinafsar]

You can try https://www.npmjs.com/package/next-ts-api, which makes your existing Next.js API route fully typesafe. MORE

Example Route:

import { NextApiRequest } from 'next-ts-api';

// POST /api/todos
export async function POST(
  request: NextApiRequest<{
    title: string;
  }>
) {
  const { title } = await request.json();
  const newTodo: Todo = {
    id: Math.random().toString(),
    title,
    completed: false
  };
  return NextResponse.json(newTodo);
}

API Call:

import { createNextFetchApi } from "next-ts-api";
import { type ApiRoutes } from "../types/next-ts-api"; // auto generated
 
export const api = createNextFetchApi<ApiRoutes>();

const response = await api('todos', { // type-safe API route
    method: 'POST',
    body: {
      title: "New Todo" // type-safe body
    } 
});
const newTodo = await response.json(); // type-safe return data