nextjs

Next.js + Restate Template

This is a Next.js project bootstrapped with create-next-app. This example shows how to integrate Next.js with Restate.

The Next.js app implements and exposes a set of Restate services that are invoked from the UI. The services are implemented in TypeScript and use the Restate SDK for TypeScript.

Most important files:

• restate/services/greeter.ts: The Restate service that implements the greeting logic.
• app/page.tsx: A Next.js page that renders the UI and calls the Restate service.
• restate/serve.ts: Defines the Restate fetch endpoint that runs the services and is initialized in app/restate/[[...services]]/route.ts by the Next.js app.

Getting Started

First, start the Restate Server (after following the installation instructions):

restate-server

Then, run the app:

npm i
npm run dev

Register Restate services, in app/restate/[[...services]]/route.ts:

restate deployments register http://localhost:3000/restate --use-http1.1

Check out the UI at http://localhost:3000 and send a greeting.

You should see the greeting response You said hi to Bob! in the UI.

See Durable Execution in action

Let's have a look at how Restate makes this application resilient, by introducing simulated failures.

The greeter service first sends a notification, then waits a second and then sends a reminder, and then returns a greeting.

If you run the app, with the SIMULATE_FAILURES=true it will crash repeatedly on the sending of the reminder.

SIMULATE_FAILURES=true npm run dev

Submit another greeting from the UI and then check the invocation tab of the Restate UI to see the retries: http://localhost:9070

Or in the app logs:

[👻 SIMULATED] Failed to send reminder: 99f9f089-a7a6-4c7a-8ad2-55e804f3b764
[restate] [Greeter/greet][inv_1iib7JPjTjRw4LRLH8irJjSiI14kzCvKCd][2025-04-11T11:51:07.243Z] WARN:  Function completed with an error.
 Error: [👻 SIMULATED] Failed to send reminder: 99f9f089-a7a6-4c7a-8ad2-55e804f3b764
    at sendReminder (restate/services/utils.ts:9:14)
    at eval (restate/services/greeter.ts:12:51)
    at Object.greet (restate/services/greeter.ts:12:16)
   7 |     if (simulateFailures) {
   8 |         console.error(`[👻 SIMULATED] Failed to send reminder: ${greetingId}`);
>  9 |         throw new Error(`[👻 SIMULATED] Failed to send reminder: ${greetingId}`);
     |              ^
  10 |     }
  11 |     console.log(`Reminder sent: ${greetingId}`);
  12 | }
 POST /restate/v1/invoke/Greeter/greet 200 in 28ms

Restate will keep retrying the reminder until it succeeds.

To let the reminder succeed, you can restart the app without SIMULATE_FAILURES=true:

npm run dev

Then, the reminder will succeed and you will see the greeting in the UI.

Using AI coding tools

If you use Claude Code or Codex, then the Restate plugin will automatically be installed. For Cursor, consult the skills repo README.

Plugin repo: https://github.com/restatedev/skills/tree/main