docs: use descriptive links instead of "click here" (#25897 )

* docs: use descriptive links instead of "click here"

Linking text such as "here" or "click here" is not accessible (and
doesn't look that great either). The best example of why it's better to
use link text that provides context is that some screen readers allow
navigation by links alone. If all links say "click here", then how does
the user know which one to go to?

I tried to make the minimal change necessary to make the link text
descriptive but had to reword a few sentences that didn't read well.

* Apply suggestions from code review

Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: JJ Kasper <jj@jjsweb.site>

2021-06-09 13:23:16 -05:00

2.2 KiB

Raw Blame History

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

2.2 KiB Raw Blame History