draftId | 天野心太郎のサイト

色々やったけど、OGPを作成する過程でクライアントサイドでの処理が走るとだめっぽい。

例

const Seo: React.FC<Props> = (props: Props) => {
  const { title, description } = props;
  
  const { locale } = useLocale();
  const ogTitle = locale === "en" ? "englishTitle" : "jaTitle";
  
  return (
    <Head>
      <meta property="og:title" content={ogTitle} />
    </Head>
  )
}

→→→

_app.tsxでのuseEffectとかがよくなかったぽい？

const [mounted, setMounted] = useState<boolean>(false);

useEffect(() => setMounted(true), []);

if (!mounted) {
    return null;
  }

これを外すとなおった。けど、これが何だったのか思い出せない。

→ダークモードのためのmountedをapp.tsxで判定するように

というコミットの際に追加していた。

ダークモード判定を初期表示で行う際に必要ぽい。これを外すと、

Warning: Prop `className` did not match.Server: xxx
Warning: Prop `style` did not match.Server: xxx

というエラーたちが出る。

これが出ている箇所を見るに、

<div
className={`text-left ${
  theme === "light" ? "text-blue-500" : "text-blue-300"
}`}
>

こういうところでthemeがサーバーサイドでは常にtrueなのに、クライアントではfalseになっている場合があるから。

useThemeでスタイルを出し分けるのを辞めて、

<div className={`text-left text-blue-500 dark:text-blue-300`}>

みたいな感じにすると大丈夫そう。

で、useThemeを使うところでは

const [mounted, setMounted] = useState<boolean>(false);

useEffect(() => setMounted(true), []);

if (!mounted) {
    return null;
  }

を入れる。