framer-motionを使って動きのあるページ

framer-motionをインストール

$ npm install framer-motion

基本はこちらのブログを参照しています。

layout.jsで設定してあげることで、画面遷移アニメーションをお手軽にできます！
layout.js

import { motion } from 'framer-motion'

export default function Layout(props) {
  return (
    <div>
      <Head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{props.title}</title>
        <meta name="description" content={props.description} />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.3 }}
      >
        {props.children}
      </motion.div>
      <Footer />
    </div>
  )
}

<motion.div>〜</motion.div>

部分がアニメーション指定してる部分ということです。
initial：初期値、animate：アニメーション後、transition：速度

基本的に指定してる箇所が同時に表示・アニメーションされますが、
liタグごととか、個別にアニメーションさせたい時は、以下のようにします。

import { motion } from'framer-motion'

const list = {
  visible: {
    opacity: 1,
    transition: {
      when: "beforeChildren",
      staggerChildren: 0.2,
    },
  },
  hidden: {
    opacity: 0,
    transition: {
      when: "afterChildren",
    },
  },
}

const item = {
  visible: { opacity: 1, y: 0 },
  hidden: { opacity: 0, y: 100 },
}

export default function Blog({ blog }) {
  return (
    <Layout>
      <section>
        <h1>最近の投稿</h1>
        <motion.div
          initial="hidden"
          animate="visible"
          variants={list}>
          {blog.map((blog) => (
            <motion.article variants={item} key={blog.id}>
              <Link href={`/blog/${blog.id}`}>
                <figure>
                  <a><Image src={blog.eyecatch.url} alt={blog.title} width={1600} height={600} /></a> // サムネイル表示
                </figure>
              </Link>
              <Link href={`/blog/${blog.id}`}>
                <h3><a>{blog.title}</a></h3> // タイトル表示
              </Link>
            </motion.article>
          ))}
        </motion.div>
      </section>
    </Layout>
  )
}

<motion.div>タグの中に、<motion.article>タグを設定してます。
このサイトでは、ブログ一覧表示画面になります。

ほかにもいろいろできるようですよ。
参考サイト「Framer Motion」
Framer Motion