Next.jsのSSGで事前に生成された静的ページでlocalStorageオブジェクトを使いたい
SSGのビルド時ではユーザーのブラウザなど知りようがないので、非同期で参照するようにしないとビルド時にエラーが発生していしまう
そこで、useEffect
を使って非同期にlocalStorageからデータを取得するようにしてみる
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) : []; } }, []);
問題なく表示できた