[fix]hydration Errorの修正

エラー文：
A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

参考：
greensock/react#8

https://gsap.com/community/forums/topic/35440-warning-extra-attributes-from-the-server-style/#comment-203599
→
run into similar issue using the app directory in NextJS 13. I'm using ScrollTrigger and ScrollSmoother plugin and managed to fix it by moving the gsap.registerPlugin(ScrollTrigger, ScrollSmoother) inside of useEffect/ useIsomorphicLayoutEffect hook.

fizzy-nanae/src/slices/Hero/index.tsx

@@ -9,9 +9,7 @@ import { PrismicRichText, SliceComponentProps } from "@prismicio/react";
 import gsap from "gsap";
 import { useGSAP } from "@gsap/react";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
-import { useEffect } from "react";
-
-gsap.registerPlugin(useGSAP, ScrollTrigger);
+import { useEffect, useLayoutEffect } from "react";
 
 /**
  * Props for `Hero`.
@@ -22,6 +20,13 @@ export type HeroProps = SliceComponentProps<Content.HeroSlice>;
  * Component for "Hero" Slices.
  */
 const Hero = ({ slice }: HeroProps): JSX.Element => {
+  const useIsomorphicLayoutEffect =
+    typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+  useIsomorphicLayoutEffect(() => {
+    gsap.registerPlugin(useGSAP, ScrollTrigger);
+  });
+
   useGSAP(() => {
     const introTl = gsap.timeline();