はじめに

こんにちは、H×Hのセンリツ大好きエンジニアです。（同担OKです😉）
Next.jsを使っていて、やっぱり思うことは出来る限りSPAっぽくしたいという欲望でした。。。

色々調べた結果、template.tsxを使えば万事解決とのことなので早速やっていきましょう！

template.tsxとは？

簡単に言うと、各ページをラップして何か処理を行う時に使用されます。

各ページをラップするのはlayout.tsxと似ていますが、template.tsxはページ遷移を行うたびに再レンダリングが行われるというものです。
（layout.tsxは再レンダリングされません）

つまり、各ページをラップしつつ再レンダリングが走るということは。。。フェードインアニメーションを仕込めば画面遷移のたびにふわっと現れるサイトの完成ですねえ(´＾ω＾｀)ニチャア

配置場所はlayout.tsxと同様なので、サイト全体に適用させたい場合はappディレクトリのルートに置いちゃいましょう！😎

SPA風にするためにtemplate.tsxを使ったアニメーションを作成

Next.jsでアニメーションを実現したい場合は、framer-motionが一つの手だと思います！
ですので、以下のようにすればOKです！

template.tsx

'use client'

import { motion } from 'framer-motion'
import React from 'react'

const variants = {
  hidden: { opacity: 0 },
  enter: { opacity: 1 }
}

export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      variants={variants}
      initial="hidden"
      animate="enter"
      transition={{
        type: 'linear',
        duration: 1
      }}
    >
      {children}
    </motion.div>
  )
}

このコードでは、childrenをmotion.devでラップしています。

中身をざっくり説明すると、

コンポーネントの初期状態は非表示（opacity: 0）
コンポーネントがマウントされた時に表示（opacity: 1）させる
非表示から表示までアニメーションのトランジションを線形で1秒かけて実行する

こんな感じですね😁
これでふわっと現れてくれます！
後はお好きなように改造していただければ良いかと思います！

おわりに

ここまで見ていただきありがとうございます！
今回は簡単な紹介でしたが、こんなもんなんだ〜くらいに思っていただけると幸いです！
以上、センリツでした🤓