© LayerX Inc. Next.jsとNuxtが混在？ iframeでなんとかする！ ypresto @ JSConf 2024 Sponsor LT (2024/11/23)

⾃⼰紹介 ypresto (プレスト) @yuya_presto

© LayerX Inc. 5 バクラクのマルチプロダクトとNext.js NuxtとNext.jsを混在させたい話 将来的にNext.jsへの移⾏を検討中 ⼀部Next.jsにしたい 検証やっていき！

© LayerX Inc. 7 1プロダクトでNuxtとNext.jsを混ぜる⽅法 Next.js Nuxt Next.js Nuxt ハードナビゲーション (ページ読み込み) が発⽣ JSのグローバル ステートも失われる /foo /bar /foo /bar 埋め込みできれば 回避できる！

© LayerX Inc. 8 じゃあ埋め込めばええやん。しかし‧‧‧ 話⻑くなるから省略！ ● 要件：アプリ側を変更しないで対応 (⼯数節約) ● Next.jsアプリに、Nuxtアプリを直接埋め込む (e.g. Module Federation) ○ エントリポイントのbundleにNuxtの起動コードがベタ書きなのでそのままでは無理 ● Next.jsアプリから、NuxtアプリのPage Componentなどをimportする ○ Nuxtの機能に依存するコードがNG、dependenciesの問題 ● マイクロフロントエンド系フレームワークを使う (e.g. SAP/luigi、single-spa) ○ やりたいことに対して学習と運⽤のコストが⾼そう ○ Nuxtの機能に依存するコードがNG (なはず) ● iframeで読み込む ○ routerやHistoryがNext.jsとNuxtの2つになることへの対処が⾯倒そう チョット⾯倒なだけ では？？？

© LayerX Inc. 10 提案⼿法 Next.js 内で、Nuxtのiframeを出し分ける iframe Next.js iframe Nuxt app router router 普通のNext.jsアプリ React使⽤可能 条件を満たすURLなら iframeを全画⾯で描画 条件を満たしていない間は 空ページに遷移して隠す

© LayerX Inc. 11 提案⼿法 Next.js と Nuxt で URL の同期を取る iframe Next.js iframe Nuxt app router router Next.jsでURLを変える Nuxt側でリンククリックや 戻る進むしたら、 postMessage()

© LayerX Inc. 12 提案⼿法 Next.js の URL を Nuxt に反映する iframe Next.js iframe Nuxt app router router Nuxtで router.replace() Next.js側でURLが 変わったら postMessage() Next.jsのrouterを 正にすることで、 戻る‧進むの対応も容易に ※ iframeの中でのrouter.push() は、リロードした後にハードナビゲーションになりました

© LayerX Inc. 13 Nuxt の Custom History を実装する https://nuxt.com/docs/guide/recipes/custom-routing#custom-history-advanced window.historyじゃないのを 使える！

© LayerX Inc. 14 Nuxt の Custom History を実装する Next.jsに送って、 Next.jsでrouter.push() ※ history.go() は、Nuxt側ではhistory stackの概念を発生させたくないので未対応

© LayerX Inc. 15 Nuxt の Custom History を実装する Next.jsに送って、 Next.jsでrouter.push() ※ history.go() は、Nuxt側ではhistory stackの概念を発生させたくないので未対応 Next.jsからmessage来たら listener経由で popstate or pushしたことにする

やったか？？

問題発⽣

© LayerX Inc. 24 戻る‧進むされるとき「保存していない変更があります」を表⽰できるNuxtの機能 Next.jsにはそんなものない Navigation Guard

© LayerX Inc. 25 Next.jsのページ遷移を全⼒で⽌める！！ https://speakerdeck.com/ypresto/hack-to-prevent-page-navigation-in-next-js 5分じゃ無理なので こちらもぜひ！ 戻る→URL書き換え next-navigation-guard popstateイベント (キャンセル不可) Next.js側 History API history.go(差分) Next.jsが知らぬ間に URLを元に戻す Nuxt側 Custom History Next.jsのrouterが拾う前に stopImmediatePropagation() で握りつぶす popstateされたよ postMessage() キャンセルされたよ postMessage() ユーザーに 確認

© LayerX Inc. 27 iframe内に描画しても無駄無駄ァァ！ '@unhead/vue' を上書きし、 titleを親windowに送信 Nuxt内の タグ対応 ReactでいうContextProviderを ネストさせて上書き titleタグを描画せずに postMessage() で送信

URL同期できた、ページ遷移⽌められた、同期できた 検証完了！ できた！！

※ 今はnuxt generateでstatic buildしたものを配信しています NuxtをSSRしたらハードナビゲーションが 爆速になったのでいらんかも

制作‧著作：LayerX 終

(npm|yarn|pnpm) install next-navigation-guard https://github.com/LayerXcom/next-navigation-guard このとき作った next-navigation-guard が 実際導⼊されたのでヨシ！ ※「保存されてない変更があります」表示は、 Next.jsで作る場合も必要なことを見越して作っていた

ライブラリ、フレームワーク、APIの仕様を把握しコードを読めば、 だいたいなんでも解決できる！ 懇親会でもぜひお話しましょう‧‧！ プログラミング超楽しい！！