Next.js

Use rest-rpc with Next.js

Install

pnpm add @rest-rpc/next

Usage

Single Route Handler

// app/api/todos/[id]/route.ts
import { createRouteHandler } from "@rest-rpc/next";
import { api } from "@/contract";

export const { GET } = createRouteHandler(api.todos.get, ({ id, context }) => {
	const authorization = context.request.headers.get("authorization");
	return getTodo(id, { authorization });
});

Catch-all Route Handler

// app/api/[...rest-rpc].ts
import { createRouterHandler } from "@rest-rpc/next";
import { api } from "@/contract";

export const { GET, POST } = createRouterHandler(api, {
	todos: {
		list() {
			return listTodos();
		},
		get({ id }) {
			return getTodo(id);
		},
		create({ title }) {
			return createTodo({ title });
		},
	},
});

Framework Context

type NextRouteHandlerContext = {
	request: Request;
	signal: AbortSignal;
};

Options

type CreateRouteHandlerOptions = {
	errorHandlers?: CreateWebHandlerOptions<NextRouteHandlerContext>["errorHandlers"];
	parseBody?: NextRouteParseBody;
};

Error Handlers

export const { GET, POST } = createRouterHandler(api, handlers, {
	errorHandlers: {
		onRequestValidationError: ({ issues }) => ({
			status: 422,
			body: { code: "VALIDATION_ERROR", issues },
		}),
		onUnhandledError: () => ({
			status: 500,
			body: { code: "INTERNAL_SERVER_ERROR" },
		}),
	},
});

Body Parsing

export const { POST } = createRouteHandler(api.uploads.create, createUpload, {
	parseBody: ({ request }) => request.formData(),
});