next.js/examples/with-xstate

XState example

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

Deploy your own

How to use

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

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

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

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

Inspect your machines using @xstate/inspect

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

Install @xstate/inspect

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

Import it at the top of the project

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

Use the inspect method

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 to Now

Deploy it to the cloud with Vercel (Documentation).

References

• xstate repository
• @xstate/react documentation
• @xstate/inspect usage with Next.JS