記事ページで最後に読んだ日付を表示する

2025/04/28 NextJS

LocalStorageはクライアントサイドのストレージなので、ブラウザ上でしか使えません

つまり、サーバーサイドでレンダリングするときにLocalStorageを操作することはできません

よって、useEffect()内でLocalStorageを扱う必要があります

import { useEffect, useState } from "react";
import { useRouter } from "next/router";

export default function Home() {
  const router = useRouter();
  const { id } = router.query;
  const [lastReadDate, setLastReadDate] = useState(null);

  useEffect(() => {
    if (!id) return;

　　ローカルストレージからデータを取得してuseStateにいれる
    const savedDate = localStorage.getItem(`lastRead_${id}`);
    if (savedDate) {
      setLastReadDate(savedDate);
    }

    ローカルストレージにデータを保存する
    const today = new Date().toISOString();
    localStorage.setItem(`lastRead_${id}`, today);
  }, [id]);

  return (
    <>
      {lastReadDate && (
        <p>前回読んだ日付：{new Date(lastReadDate).toLocaleString()}</p>
      )}
    </>
  );
}

BACK