Next.js Quickstart

import { actor, setup } from "rivetkit";

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

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

import { registry } from "./registry";

registry.start();

"use client";

import { createRivetKit } from "@rivetkit/next-js/client";
import { useState } from "react";
import type { registry } from "./registry";

const { useActor } = createRivetKit<typeof registry>({
	endpoint: process.env.NEXT_PUBLIC_RIVET_ENDPOINT ?? "http://localhost:6420",
});

export function Counter() {
	const [count, setCount] = useState(0);
	const counter = useActor({ name: "counter", key: ["my-counter"] });

	counter.useEvent("newCount", (value: number) => setCount(value));

	return (
		<div>
			<p>Count: {count}</p>
			<button onClick={() => counter.connection?.increment(1)}>Increment</button>
		</div>
	);
}

import { Counter } from "../rivet/Counter";

export default function Home() {
	return <Counter />;
}