rsnext/examples/with-xstate

XState example

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

Preview

Preview the example live on StackBlitz:

Deploy your own

Deploy the example using Vercel:

How to use

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

npx create-next-app --example with-xstate with-xstate-app
# or
yarn 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