【Next.js】localStorageを使う

Next.jsのSSGで事前に生成された静的ページでlocalStorageオブジェクトを使いたい

SSGのビルド時ではユーザーのブラウザなど知りようがないので、非同期で参照するようにしないとビルド時にエラーが発生していしまう

そこで、useEffectを使って非同期にlocalStorageからデータを取得するようにしてみる

uga-box.hatenablog.com

localStorageに保存しているのは検索履歴

  const [historyList, setHistoryList] = useState<Array<any>>([]);

  useEffect(() => {
    if (typeof window !== "undefined") {
      const serializedSearchHistory = localStorage.getItem("searchHistory");
      const searchHistory: Array<any> = serializedSearchHistory
        ? JSON.parse(serializedSearchHistory)
        : [];
    }
  }, []);

問題なく表示できた