Next.js のページ遷移を全力で止める

LX Web Frontend Night: Unleash Next.js

録画 https://www.youtube.com/watch?v=uc-GgjE_G4g&t=216s

https://github.com/LayerXcom/next-navigation-guard

This is Japanese edition.
English edition: https://speakerdeck.com/ypresto/cancel-nextjs-page-navigation-full-throttle

Transcript

1. © LayerX Inc. Next.js のページ遷移を全⼒で⽌める！！ ypresto @ LX Web Frontend Night: Unleash Next.js (2024/09/18)
2. © LayerX Inc. 3 ⾃⼰紹介 • LayerX バクラク事業部 ◦ 請求書受取‧仕訳チーム ◦ ソフトウェアエンジニア ◦ 経理の⽅が利⽤するプロダクトの開発 • フロントエンドやっていき！でも全部やる • 趣味は主に写真とスプラ、⼦とおでかけ ypresto (プレスト)
3. © LayerX Inc. 4 バクラクとNext.js バクラクでは、新規プロダクトはReact + Next.jsを採⽤ 将来的にNext.jsへの移⾏を検討中
4. © LayerX Inc. 5 • バクラクではNext.jsを採⽤しています フロントエンドビジョン by ギルド Reactを採⽤する理由の例 • BEエンジニアを含むメンバーとの相性 • プロダクト間コンテキストスイッチの低減 • フレームワーク統⼀による基盤開発の促進 バクラクのフロントエンドが⽬指す姿
5. © LayerX Inc. 6 「保存していない変更」を実装したい 「保存されません」ダイアログ、実装してますか？
6. © LayerX Inc. 7 「保存していない変更」を実装したい 変更の保存漏れを防ぐパターン2選 ユーザーがコントロールする 「確認ダイアログ」 勝⼿にいい感じにする 「⾃動保存」「下書き保存」
7. © LayerX Inc. 8 「保存していない変更」を実装したい 変更の保存漏れを防ぐパターン2選 ユーザーがコントロールする 「確認ダイアログ」 勝⼿にいい感じにする 「⾃動保存」「下書き保存」 申請や財務情報など、変更が慎重であるべきもの 公開や提出が済んでいる情報の編集 社内ドキュメントなど、戻せば許されるもの 下書きなど、⾃分にしか⾒えていない情報 BtoB SaaSでは必須！
8. © LayerX Inc. 9 「保存していない変更」を実装したい 「戻る」「進む」ボタンでもちゃんと出ますか？？？ Next.jsのRouterとHistory APIの都合で、「キャンセル」でページ遷移を止めるのが難しい。
9. © LayerX Inc. 10 「保存していない変更」を実装したい そのころNext.jsでは 「オレオレ実装の提案」 「それではうまくいきませんね」 を無限ループ中 https://github.com/vercel/next.js/discussions/9662 https://github.com/vercel/next.js/discussions/47020 App Routerで ページ遷移を⽌めたい Pages Routerで ページ遷移のイベントがほしい
10. Next.js 使っていようとも 全⼈類がページ遷移をキャンセルしたい
11. App Router & Pages Router に対応した「Navigation Guard」ライブラリ ないものは作る！ Bet Technology!
12. © LayerX Inc. 14 ライブラリの使い⽅ App Router & Pages Router に対応した「Navigation Guard」ライブラリ • app/layout.tsx か pages/_app.tsx で、<NavigationGuardProvider> で囲う • • useNavigationGuard({ enabled: isChanged, confirm: () => window.confirm() }) • • const navGuard = useNavigationGuard({ enabled: isChanged }) <Dialog show={navGuard.active}> <Button onClick={() => navGuard.accept()}>OK</Button> <Button onClick={() => navGuard.reject()}>OK</Button> </Dialog> • • enabled: () => isChanged() でもOK
13. Next.js と History API ※この後は、App Routerを前提に話します ページ遷移を⽌める3つのHack
14. © LayerX Inc. 16 Next.js と History API SPA的でない遷移 • リロードボタン • 外部サイトへの遷移 SPA: アプリ内リンク等 • <Link> • router.push() • router.replace() • router.refresh() ページを離脱する遷移を⽌めたい：その分類 • 戻る‧進むボタン • router.back() • router.forward() SPA: back/forward
15. © LayerX Inc. 17 Next.js と History API SPA的でない遷移 • リロードボタン • 外部サイトへの遷移 SPA: アプリ内リンク等 • <Link> • router.push() • router.replace() • router.refresh() ページを離脱する遷移を⽌めたい：その分類 • 戻る‧進むボタン • router.back() • router.forward() SPA: back/forward beforeunloadイベント 出典：MDN
16. 制作‧著作：LayerX 終
17. © LayerX Inc. 19 Next.js と History API SPA的でない遷移 • リロードボタン • 外部サイトへの遷移 SPA: アプリ内リンク等 • <Link> • router.push() • router.replace() • router.refresh() ページを離脱する遷移を⽌めたい：その分類 • 戻る‧進むボタン • router.back() • router.forward() SPA: back/forward beforeunloadイベント Next.js & History API
18. © LayerX Inc. 20 Next.js と History API • ブラウザにフェッチさせずに、 URLと履歴だけをJSから書き換える • JSで画⾯の中⾝を書き換える • history.stateで現在ページのstate (カスタ ムでセットした情報) が読める • 戻る‧進む操作でstackの位置が変わると URLが変わってから popstateイベントが発⾏される /posts/123 /posts アプリ側でページ遷移と履歴を⾃前で管理 SPA と History API /posts/124 state state state history.pushState() で積む history.replaceState() で上書き 進むボタン history.forward() / history.go(x) 戻るボタン history.back() / history.go(-x) 現在の ページ / state
19. © LayerX Inc. 21 Next.js と History API SPA的でない遷移 • リロードボタン • 外部サイトへの遷移 SPA: アプリ内リンク等 • <Link> • router.push() • router.replace() • router.refresh() ページを離脱する遷移を⽌めたい：その分類 • 戻る‧進むボタン • router.back() • router.forward() SPA: back/forward 1. Next.jsの状態を更新 2. Historyを書き換え beforeunloadイベント
20. © LayerX Inc. 22 Next.jsのページ遷移：アプリ内リンク等 App Router History API history.pushState() <Link> クリックでのページ遷移 <Link> が router.push() React Routerの状態を更新 新しいページを描画
21. © LayerX Inc. 23 Next.jsのページ遷移：アプリ内リンク等 App Router History API history.pushState() <Link> クリックでのページ遷移 <Link> が router.push() React Routerの状態を更新 新しいページを描画 ここで⽌めたい
22. © LayerX Inc. 24 Next.jsのページ遷移：アプリ内リンク等 Next.jsに割り込み機能はない App Routerのrouter.push() のコード https://github.com/vercel/next.js/blob/9a1cd356dbafbfcf23d1b9ec05f772f766d05580/packages/next/src/client/components/app-router.tsx#L390-L394 ここで⽌めたい
23. 本⽇の Hack #1 Context 経由で Router を差し替える
24. © LayerX Inc. 26 Context 経由で Router を差し替える <AppRouterContext.Provider value={公式ルーター}> ... <AppRouterContext.Provider value={wrapしたルーター}> {アプリ} </AppRouterContext.Provider> ... </AppRouterContext.Provider> Contextの値は⼀番近い親のものが使われる アプリから使われるのは こっちになる 元のrouterオブジェクトを 破壊的に変更せずに 差し替えられる
25. © LayerX Inc. 27 Next.jsのページ遷移：back/forward SPA的でない遷移 • リロードボタン • 外部サイトへの遷移 SPA: アプリ内リンク等 • <Link> • router.push() • router.replace() • router.refresh() ページを離脱する遷移を⽌めたい：その分類 • 戻る‧進むボタン • router.back() • router.forward() SPA: back/forward 1. Next.jsの状態を更新 ←★ 2. Historyを書き換え beforeunloadイベント 1. Historyの位置が変わる 2. Next.jsの状態を更新 ←★
26. © LayerX Inc. 28 Next.jsのページ遷移：back/forward App Router History API ブラウザの戻る‧進むを押した場合のページ遷移 popstateイベント React 新しいページを描画 スタックの indexを変更 URLも変わる Routerの状態を更新
27. © LayerX Inc. 29 Next.jsのページ遷移：back/forward App Router History API ブラウザの戻る‧進むを押した場合のページ遷移 popstateイベント React 新しいページを描画 スタックの indexを変更 URLも変わる Routerの状態を更新 Historyの書き換えは キャンセルできない ここで⽌めれてもURLは 変わったまま
28. © LayerX Inc. 30 Next.jsのページ遷移：back/forward スタックの位置を変更 History API 戻る‧進むされたイベントを握りつぶして、Historyを戻したい popstateイベント next-navigation-guard キャンセルしたいか確認 history.go(差分) popstateイベント イベントを ここで握りつぶしたい スタックの位置を変更 Next.jsが知らぬうちに 書き戻す
29. © LayerX Inc. 31 Next.jsのページ遷移：back/forward / イベントを握りつぶす のび太「captureしてstopPropagation()でいけるのでは？」 <body> <div> <button> Capturing Phase Bubbling Phase <body> <div> <button> div.addEventListener("click", e => e.stopPropagation(), { capture: true }) div.addEventListener("click", e => e.stopPropagation()) <body> <div> <button>
30. © LayerX Inc. 32 Next.jsのページ遷移：back/forward / イベントを握りつぶす Chromeでは動かん、FirefoxやSafariでは動く Chromeはcapture指定しても 先に呼ばれない！？ Firefoxはcaptureが先
31. stopImmediatePropagation() で イベントを⽌める 本⽇の Hack #2
32. © LayerX Inc. 34 stopImmediatePropagation() Next.js より先に addEventListener() して stopImmediatePropagation() で⽌める 同じ要素に後から追加された Event Listenerを呼びださない window.addEventLisnter("popstate", () => ...) window.addEventLisnter("popstate", e => e.stopPropagation()) window.addEventLisnter("popstate", () => ...) window.addEventLisnter("popstate", () => ...) window.addEventLisnter("popstate", e => e.stopImmediatePropagation()) window.addEventLisnter("popstate", () => ...) ←Next.jsは呼ばれない
33. © LayerX Inc. 35 Next.js より先に addEventListener() して stopImmediatePropagation() で⽌める popstateイベントを stopImmeidatePropagation() で握りつぶすことに成功 useEffect() より速い useLayoutEffect() で先に刺す 〜〜〜 App Router のコード
34. © LayerX Inc. 37 Next.jsのページ遷移：back/forward スタックの位置を変更 History API 戻る‧進むされた分のスタック位置を元に戻したい popstateイベント next-navigation-guard 差分が0なら握りつぶす キャンセルしたいか確認 history.go(差分) popstateイベント 反映済みのindexと history.stateで引き算して 書き戻したい スタックの位置を変更 握りつぶせた！
35. © LayerX Inc. 38 Next.jsのページ遷移：back/forward • Q. History APIだけで計算できますか ◦ 現在ページのindex取れません ◦ popstateで戻ったのか進んだのかさえ不明 • Q. Next.jsはつけてくれませんか ◦ Pages Routerでのinternalの情報しかない ◦ Next.jsはhistory.stateをあまり開放したくないように⾒える • Q. Navigation APIのnavigation.currentEntry.indexは？ ◦ SafariとFirefoxでまだサポートされていません • とにかくそのままでは取れないんです！！ どれくらい戻る‧進むされたか知りたい...
36. history.pushState() を上書きして stateにindexを⼊れる 本⽇の Hack #3
37. © LayerX Inc. 40 Next.jsが呼び出す history.pushState() を 上書きして、stateにindexを⼊れる • 仕⽅がないので⾃前でつけた。さっきのpopのindexなぁに？ 🐐 • stackを積むたびにstateにindexを保存 • history.go(描画中のindex - stateのindex) で元の位置に戻せる ◦ 2つ戻されたら、2つ進めて、なかったことに 戻された数だけ進めるため、indexを保存 window.history.pushState = function (state, unused, url) { state = { …state, index: ++currentIndex } origPushState.call(this, state, unused, url) } /posts/123 /posts state.index: 1 state.index: 2 / state.index: 0
38. (npm|yarn|pnpm) install next-navigation-guard https://github.com/LayerXcom/next-navigation-guard できあがり！
39. © LayerX Inc. 42 • 全⼈類がページ遷移を⽌めたい oO(BtoB SaaSでは特に) • ⾏動指針 “Bet Technology” なので、ないので作った • • ReactのContext、App Router、History API、それぞれの間に割り込むことで解決できた ◦ Hack #1: Context 経由で Router を差し替える ◦ Hack #2: stopImmediatePropagation() でイベントを⽌める ◦ Hack #3: history.pushState() を上書きしてstateにindexを⼊れる • • ライブラリ、フレームワーク、APIの仕様を把握しコードを読めば、 だいたいなんでも解決できる！ • • (npm|yarn|pnpm) install next-navigation-guard • https://github.com/LayerXcom/next-navigation-guard • • 余談：history.go(-delta) は、Nuxtから拝借しました。Next.jsでも公式で実装して欲しいです！ まとめ
40. © LayerX Inc. 43 • Pages Routerの場合は？ ◦ popstateに割り込まなくても、router.beforePopState(() => ...) で割り込み可能 ◦ falseを返すとNext.js側の状態変更はしないが、stackの位置を元に戻してくれない ◦ App Router⽤にstackの位置を元に戻す処理を実装していたので、そのままPages Routerに転 ⽤ • window.confirm()は同期的だけど、カスタムダイアログは⾮同期。どうやって？ ◦ stopImmediatePropagation() してから dispatchEvent(new PopStateEvent("popstate", { ... })) してます ちなみに