Next.js+framer-motionで画面遷移アニメーション - Qiita

import React from "react"; import type { AppProps } from "next/app"; import { AnimatePresence } from "framer-motion"; function MyApp({ Component, pageProps, router }: AppProps) { return ( <div> <AnimatePresence exitBeforeEnter> <Component {...pageProps} key={router.route} /> </AnimatePresence> </div> ); } export default MyApp; Next.js はファイル名を元にルーティングされるのでルーターの細かい設定は要りません。（楽！） <Component> の中身がルーティン