logo
Published on

nextjsで画面遷移するたびに処理するようにする

著者
  • profile
    名前
    平原典彦
nextjs で画面遷移時に処理を入れたい場合があると思います。
そのときに役に立つ自作hooksです。
// hooks/usePageTransition.tsx

"use client";
import { useEffect, useState } from "react";
import { usePathname, useSearchParams } from "next/navigation";

const usePageTransition = () => {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const [path, setPath] = useState("");

  useEffect(() => {
    setPath(pathname + searchParams);
  }, [pathname, searchParams]);

  return { path };
};

export default usePageTransition;
呼び出し側
"use client";
import { useEffect } from "react";
import usePageTransition from "@/hooks/usePageTransition";

export default function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { path } = usePageTransition();

  useEffect(() => {
    console.log(path)
  }, [path]);

  return (
    <>
      {children}
    </>
  );
}
フロントでしか動作しないので use client は必須になります。