<h2 id="h8d027c8ed3">はじめに</h2><p><span style="color:#333333">Next.jsを使用しているプロジェクトにアニメーションを使用する機会があり、そこで、Next.jsの概念周りで理解力不足ではまった点があるので、記録として残しておきます。</span><br></p><h2 id="h4f983c1ec2">Next.js(ssgやssr)でアニメーションをする際の注意点</h2><p><span style="color:#333333">自分がハマったのが、ScrollRevealというパッケージを使用して、スクロールすると対象の要素がふわっと浮き上がるアニメーションを実装しようとした時です。</span><br><br><a style="color:#4aac00;background-color:#ffffff" href="https://scrollrevealjs.org/" target="_blank" rel="noopener noreferrer">https://scrollrevealjs.org/</a><br><br>以下コマンドで、パッケージをインストール<br><code>yarn add scrollreveal </code><br><code>yarn add @type/scrollreveal</code><br><br>以下の素のReactコードを見ていきます。</p><pre><code>import { useRef, useEffect } from "react";
import { NextPage } from "next";
// ビルド時にimportしている
import scrollReveal from "scrollreveal";

type Props = {
  move: string;
  delay: number
  className?: string
}

const ScrollReveal: NextPage&lt;Props&gt; = ({
  children,
  move,
  delay,
  className
}) =&gt; {
  const sectionRef = useRef&lt;HTMLDivElement&gt;(null);
  useEffect(() =&gt; {
    async function animate() {
      if (sectionRef.current) {
        //ここに注目
        scrollReveal().reveal(sectionRef.current, {
          delay: delay,
          opacity: 0,
          origin: move,
          distance: "20px",
          viewFactor: 0.2
        })
      }
    }
    animate()
  }, [sectionRef])
  return &lt;div className={`${className}`} ref={sectionRef}&gt;{children}&lt;/div&gt;
};
export default ScrollReveal;</code></pre><p><br>このように、記述できます。<br><br>しかし、Next.jsでSSG(静的サイトジェネレーション)、SSR(サーバーサイトジェネレーション)を用いた開発を行う際、yurn build もしくは npm run buildする際に document is not defined というエラーが出てきます。<br></p><h3 id="h70c4ac2924">エラーの原因</h3><p>ScrollRevealパッケージをimportする際、パソコンの情報(windowの横、縦幅など)が必要なんですが、ビルド時には、それらの情報は存在しないのでエラーが出ます。<br></p><h3 id="hc4c05c18f9">解決策</h3><p>ビルド時にScrollRevealをimportせずに、ユーザーがパソコンでサイトを開いたタイミングでScrollRevealをimportする。<br></p><h3 id="h48efa69dd6">具体的な解決策</h3><p>まず、Next.jsには&nbsp;<strong>Dynamic import</strong>&nbsp;というパッケージのimport方法があるのでこの技術を使用してエラー回避します。<br></p><h4 id="h8f47a4eb8c"><a style="color:#4aac00" href="https://nextjs.org/docs/advanced-features/dynamic-import" target="_blank" rel="noopener noreferrer">Dynamic Import</a></h4><p>これは、動的にパッケージをimportする技術です。(動的というとわかりにくいので、ユーザーがサイトを開いたタイミングというふうに認識しています。間違ってたらごめんなさい。。。)<br>つまり、ビルド時、サーバーサイドではScrollRevealパッケージをimportせずに、ユーザーがサイトを訪れたタイミングで初めてimportし、document is not definedを回避するということです。<br><br>以下、修正後のコード</p><pre><code>import { useRef, useEffect } from "react";
import { NextPage } from "next";
//importしていない


type Props = {
  move: string;
  delay: number
  className?: string
}

const ScrollReveal: NextPage&lt;Props&gt; = ({
  children,
  move,
  delay,
  className
}) =&gt; {
  const sectionRef = useRef&lt;HTMLDivElement&gt;(null);
  useEffect(() =&gt; {
    async function animate() {
      if (sectionRef.current) {
        //Dynamic import
        const sr = (await import("scrollreveal")).default
        sr().reveal(sectionRef.current, {
          delay: delay,
          opacity: 0,
          origin: move,
          distance: "20px",
          viewFactor: 0.2
        })
      }
    }
    animate()
  }, [sectionRef])
  return &lt;div className={`${className}`} ref={sectionRef}&gt;{children}&lt;/div&gt;;
};
export default ScrollReveal;</code></pre><p><br><span style="color:#333333">このように記述を変更すれば、エラー回避できます！！</span><br></p><h3 id="ha214098e44">まとめ</h3><p>Next.jsでは、概念から理解しないとハマるところではハマるので難しいです。</p>

Next.jsでアニメーションパッケージを使用する際の注意点

エンジニア図書館

Next.js

Next.jsでアニメーションパッケージ(ScrollReveal)を使用する際の注意点