用途:在 Next.js 应用中用 NextStep v2(nextstepjs)构建产品导览、上手流程和交互式教程/课程,默认采用“操作门控”的教学模式,而非通用欢迎弹窗。
主要能力:支持定义 Tour/Step 结构,步骤可锚定 DOM 元素(selector)或作为居中弹窗;支持多页路由(nextRoute/prevRoute)、可滚动容器(NextStepViewport)、自定义卡片(cardComponent)、键盘控制开关、交互禁用等。提供 useNextStep Hook(startNextStep、closeNextStep、currentTour、currentStep、setCurrentStep、isNextStepVisible)以及 onStart、onStepChange、onComplete、onSkip 生命周期回调,便于接入分析。
使用方式:安装 npm i nextstepjs motion(motion 为 peer 依赖)。在 App Router 的 layout 中用 NextStepProvider 包裹 NextStep 并传入 tours;在客户端组件中通过 useNextStep 的 startNextStep('welcome') 触发。步骤需在目标元素上添加对应 id。自动启动应放在 useEffect 中,不可在渲染期间调用。
适用场景:产品引导、功能导览、多页教程、需要用户完成指定动作才能继续的课程式教学。
限制:NextStep 无内置 i18n,需自行封装;自定义卡片需自行处理 showControls/showSkip;多页教程在异步页面需提供占位锚点;Pages Router 可能遇到 ESM 报错,需参考故障排查文档。具体收费、平台与效果资料暂未提供。