Next.jsでZennの記事をAPIで取得する

概要

個人ポートフォリオに Zenn の記事を掲載したときのメモ

Zenn の記事を取得する API

Zenn の記事は以下の API から取得できる。

https://zenn.dev/api/articles?username=(ユーザーID)&order=latest

ソースコード

コードは以下のとおり。

BlogList.tsx

interface Post {
  id: number;
  path: string;
  emoji: string;
  title: string;
  published_at: string;
}

export default async function BlogList() {
  const res = await fetch(
    'https://zenn.dev/api/articles?username=(ユーザーID)&order=latest',
  );
  const data = await res.json();
  const posts: Post[] = data.articles.slice(0, 10);

  return (
    <>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link
              href={`https://zenn.dev/${post.path}`}
              target="blank"
            >
              <span>{post.emoji}</span>
              <p>
                {post.title}
              </p>
              <p>
                <ConvertDate convertDate={post.published_at} />
              </p>
            </Link>
          </li>
        ))}
      </ul>
    </>
  );
}

ConvertDate.tsx

import dayjs from 'dayjs';

type Props = {
  convertDate: string | number | Date;
};

export default function ConvertDate({ convertDate }: Props) {
  const publishedAt = dayjs(convertDate).format('YYYY/MM/DD/');

  return <time dateTime={convertDate.toString()}>{publishedAt}</time>;
}

実際のサイト

https://h-ymt.com/blog