🚀
Next.js (React)で初回アクセスかどうかをsessionStorageで判定する
トップページのローディングアニメーションが長いので、初回アクセス時だけに限定したい、という要件でした。
tsxファイルです。
sessionStorageはuseEffect内じゃないと使えないので注意。なんかSSRとかの都合らしい
useEffect(() => {
//セッションストレージで初回訪問かどうかを判定
const data = sessionStorage.getItem('first accessed')
// 初回訪問でなければ処理を終了
if (data === 'true') return
//初回訪問なら処理を実行
animate()
//セッションストレージにtrueをセット
sessionStorage.setItem('first accessed', 'true')
}, [])
const animate = () => {
//初回だけ実行したいアニメーション
}
参考記事
Discussion