Backend

Next.js

Next.js is a powerful React framework that allows you to build server-rendered applications with ease. The Rivet Next.js client enables you to connect to and interact with actors in your Next.js applications.

View Example on GitHub

Check out the complete example

View client integration

Use the RivetKit React client to connect to actors

Basic Usage

Installation

Install the RivetKit Next.js package:

npm install @rivetkit/actor @rivetkit/next-js

Create an Actor

Create a simple counter actor:

src/rivet/registry.ts

import { actor, setup } from "@rivetkit/actor";

export const counter = actor({
	state: { count: 0 },
	actions: {
		increment: (c, amount: number = 1) => {
			c.state.count += amount;
			c.broadcast("countChanged", c.state.count);
			return c.state.count;
		},
		getCount: (c) => c.state.count,
	},
});

export const registry = setup({
	use: { counter },
});

Setup Registry API routes

src/app/api/registry/[...all]/route.ts

import { toNextHandler } from "@rivetkit/next-js";
import { registry } from "@/rivet/registry";

const server = registry.createServer({
	// Use the same base path as the client
	// This is important for Next.js to route the API calls correctly
	basePath: "/api/registry",
	studio: {
		// Tell RivetKit Studio where to find RivetKit Registry
		defaultEndpoint: "http://localhost:3000/api/registry",
	},
});

// Export the Next.js handler for the API routes
export const { GET, POST, HEAD, PATCH, OPTIONS } = toNextHandler(server);

API Reference

`toNextHandler`

Converts a RivetKit server to a Next.js handler for API routes.

TypeScript

import { actor, setup } from "@rivetkit/actor";
import { toNextHandler } from "@rivetkit/next-js";

const counter = actor({
	state: {},
	actions: {
		/* your actions here */
	},
});

const registry = setup({
	use: { counter },
});

const server = registry.createServer();

export const { GET, POST, HEAD, PATCH, OPTIONS } = toNextHandler(server);

Parameters

server: The RivetKit server instance created from your registry.

Returns

An object containing Next.js-compatible handlers for the HTTP methods.