Next.js + Framer Motion でページ遷移アニメーションを実装する - Qiitaまえがき React のアニメーションライブラリである Framer Motion を利用してページ遷移アニメーションを実装した際に、いくつか引っかかった点があったので、備忘録として残しておこうと思います。 バージョン Next.js v12.1.1 Framer Motion v7.6.1 今回実装するもの ↑ こんな感じのふんわりしたフェードイン / フェードアウトを実装します。 手順 1. アンマウント時のアニメーションを有効にする import { AnimatePresence } from 'framer-motion' import type { AppProps } from 'next/app' import 'styles/globals.css' const MyApp = ({ Component, pageProps, router }: AppProps) =>
