XState example

This example shows how to integrate XState in Next.js. Learn more about XState.

Deploy your own

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

bash

npx create-next-app --example with-xstate with-xstate-app

bash

yarn create next-app --example with-xstate with-xstate-app

bash

pnpm create next-app --example with-xstate with-xstate-app

You could use the inspection tools for XState: (@xstate/inspect) to debug and visualize your machines in development mode.

bash

npm install @xstate/inspect
# or
yarn add @xstate/inspect
# or
pnpm add @xstate/inspect

import { inspect } from "@xstate/inspect";

Note that for Next.js projects, you should ensure that the inspector code only runs on the client, rather than the server:

if (typeof window !== "undefined") {
  inspect({
    /* options */
  });
}

Deploy it to the cloud with Vercel (Documentation).