9cc6ba93ab
Hello this PR is in order to update xstate to the lastest version and use the `createMachine` method instead of `Machine`. I also added the inspect mode in order to show how we could use into a next.js app. ## Documentation / Examples - [x] Make sure the linting passes |
||
---|---|---|
.. | ||
components | ||
machines | ||
pages | ||
.gitignore | ||
package.json | ||
README.md |
XState example
This example shows how to integrate XState in Next.js. For more info about XState you can visit here.
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