noteの記事一覧を、Next.jsのサイト上に自動的に表示する方法

note-website.tsx

import Image from "next/image";
import Link from "next/link";
import Parser from "rss-parser";

export default async function Page() {
  const parser = new Parser({
    customFields: {
      item: [["media:thumbnail", "mediaThumbnail"]],
    },
  });
  const url = "https://note.com/info/rss";
  const feed = await parser.parseURL(url);
  const posts = feed.items;

  return (
    <ul className="divide-y divide-gray-300 bg-white">
      {posts.map((post) => (
        <li key={post.guid}>
          <Link
            href={post.link!}
            className="flex items-center gap-4 p-4"
            target="_blank"
            rel="noopener noreferrer"
          >
            <div className="relative aspect-1200/630 w-[120px] flex-none">
              <Image
                src={post.mediaThumbnail}
                alt={post.title!}
                fill
                className="object-cover"
              />
            </div>
            <div className="flex-auto space-y-1">
              <h2 className="font-medium">{post.title}</h2>
              <p className="text-sm text-gray-500">
                {new Date(post.pubDate!).toLocaleString("ja-JP", {
                  timeZone: "Asia/Tokyo",
                })}
              </p>
            </div>
          </Link>
        </li>
      ))}
    </ul>
  );
}