【Next.js】Next.js 13.4でページ移動を検知してページローディングアニメーションを実装する方法

'use client'
import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'

export default function Example() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  // ページ移動を検知
  useEffect(() => {
    alert('ページ移動したよ！')
  }, [pathname, searchParams])

  return (
    {/* JSX */}
  )
}

// ローディングアニメーションを表示管理するためのステートを定義
import { atom } from 'jotai'

export const loadingAtom = atom<boolean>(false)

'use client'
import { atom } from 'jotai'

// States
import { loadingAtom } from '@/states/loadingAtom'     // 先ほど定義したステートを呼び出す

export default function useLoading() {
  const [value, setValue] = useAtom(loadingAtom)

  // ローディング開始
  const start = () => {
    setValue(true)
  }

  // ローディング終了
  const stop = () => {
    setValue(false)
  }

  return {
    value,
    start,
    stop
  }
}

'use client'
import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
import Image from 'next/image'

// Hooks
import useLoading from "@/hooks/loading/useLoading"

export default function Loading() {
  const pathname = usePathname()                                                                                              // パス
  const searchParams = useSearchParams()　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　      // クエリパラメータ
  const siteUrl: string = (process.env.NEXT_PUBLIC_SITE_URL)? process.env.NEXT_PUBLIC_SITE_URL : "http://localhost:3000"      // サイトオリジンURL
  const currentUrl: string = siteUrl + pathname　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　      // 現在ページのURLパス
  const loading = useLoading()                                                                                                // ページローディングのカスタムフック呼び出し

  // ページローディングを表示させる関数
  function handleStartLoading() {
    loading.start()
  }

  // ページ移動検知
  useEffect(() => {
    const links = document.getElementsByTagName('a')     // 現在表示しているページのすべてのaタグを取得

    // ページ移動完了後にページローディングを非表示にする
    setTimeout(() => {
      // ローディングを停止
      loading.stop()
    }, 1000);

    // 各aタグにイベントリスナーを追加
    for(let i=0; i<links.length; i++) {
      // 現在開いているページ以外に移動するaタグにクリックイベントを追加
      // ※ 現在開いているページにもクリックイベントを追加するとページローディングが消えなくなる可能性が出ちゃう
      if(
        currentUrl !== links[i].href &&
        links[i].href.startsWith(siteUrl)
      ) {
        links[i].addEventListener('click', handleStartLoading)
      }
    }

    // コンポーネント破棄時にイベントリスナーを削除
    return () => {
      for(let i=0; i<links.length; i++) {
        links[i].removeEventListener('click', handleStartLoading)
      }
    }
  }, [pathname, searchParams])

  return (
    <>
    {loading.value &&
      {/* ページローディングアニメーションのHTML記述 */}
    }
    </>
  )
}