Nextjs で view transition api を使ってページ遷移時にアニメーションを実装する

はじめに

Nextjs でページ遷移時にアニメーションを実装する方法を調べていたところ、view transition api という API があることを知りました。
Astro でも使えるようになったのを知っていたのですが、Nextjs でも使えるのか気になったので調べてみました。

view transition api を使う例はたくさんあったのですが、直接 CSS を書いたり、使い方が難しかったり、ブラウザがサポートしていないなどの理由で使っていませんでした。

view transition api はまだ実験的な機能です。
2024/04/30 時点では、Chrome と Edge でしかサポートされていません。

next view trantisions を Github で見つけました。
使い方が、

Nextjs の Layout コンポーネントにラップ
import { Link } from 'next-view-transitions' next-view-transitions由来の Link コンポーネント使用

だけで実装できるので、簡単に使えそうです。

ニセモノのポ ◯ モンの画像を生成して、ページ遷移時にアニメーションを実装してみました。
サイトの大枠はv0で作りました。

とても簡単にポケ ◯ ン図鑑のリスト画面・詳細部分が作れました。
まだすべてのブラウザでサポートされていない点に注意です。

よい連休を。