rsnext/examples/with-xstate

XState example

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

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

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

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