もうすぐSafariでView Transitions APIが実装されるということでちょっと盛り上がった
とはいえ、まだTech Preview中なので、全ユーザーが使うとなるともう少し後になる模様
View Transitions API はChromeでは既に実装されていて、自分でも以前調べていた
これがNext.jsのApp Routerで扱えるようにしてみたというお話しを聞いたのでメモ
View Transitions API を画面遷移の表現方法として使うには、以下のcallback関数に遷移開始と遷移完了をPromiseとして扱ったものを渡す必要がある
document.startViewTransition(callback)
しかし、App Routerでは遷移開始と遷移完了をPromiseとして扱えないので、工夫をしなければView Transitions APIが使えない
ゆえに、現在Next.js側でなんとかしてくれとdiscussion中とのこと
Add support for View Transition API · vercel next.js · Discussion #46300 · GitHub
ただ、コメントの中にuseTransitionでPromiseを返すようなhooksを実装をすれば一旦使えるという提案があり、これを試したというお話しだった
Add support for View Transition API · vercel next.js · Discussion #46300 · GitHub
実際に上に記載されたコードを自分でも試したところうまく動いた
ブラウザバックの対応などのためにはやはりNext.js側に対応してもらう必要があるが、このように実装することもできると理解した
実装してみてuseTransitionの仕組みがよく分かっていないことに気づいたのでそれは別の機会にまとめてみる
