2．マイページで最近読んだ記事一覧を表示する

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function ArticlePage() {
  const router = useRouter();
  const { slug } = router.query;

  const articleTitle = `記事タイトル(${slug})`;

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

    const today = new Date().toISOString();
    const readData = {
      slug,
      title: articleTitle,
      date: today,
    }

    ローカルストレージから履歴を取得します
    const history = JSON.parse(localStorage.getItem('readHistory') || '[]');

　　同じスラッグの記事があれば削除
    const updatedHistory = history.filter(item => item.slug !== slug);

    今回のreadDataを入れたのち
    updatedHistory.unshift(readData);

    最大10件にスライスします
    const limitedHistory = updatedHistory.slice(0, 10);

    ローカルストレージに履歴を保存します
    localStorage.setItem('readHistory', JSON.stringify(limitedHistory));

  }, [slug]);

  return (
    <>
      <h1>{articleTitle}</h1>
    </>
  );
}

import { useEffect, useState } from 'react';
import Link from 'next/link';

export default function MyPage() {
  const [history, setHistory] = useState([]);

  useEffect(() => {
    const savedHistory = JSON.parse(localStorage.getItem('readHistory') || '[]');
    setHistory(savedHistory);
  }, []);

  return (
    <>
      <h1>MyPage</h1>
      {history.length >0 ? (
        history.map((item) => (
          <li key={item.slug}>
            <Link href={`/article/${item.slug}`}>
              {item.title}
            </Link>
            <span>読んだ日：{new Date(item.date).toLocaleString()}</span>
          </li>
        ))
      ) : (
        <p>読んだ記事がありません</p>
      )}
    </>
  );
}