[Next.js] Qiita と Zenn の 記事一覧（フィード）を取得する方法

やりたいこと

Next.js を使って、Qiita と Zenn で自分の投稿した記事を取得したい。

環境

• next: 10.1.3
• typescript: 4.2.3

フィードの仕様

Qiita と Zenn が提供しているフィードを確認する。

Qiita

https://qiita.com/[UserID]/feed.atom

サンプル: https://qiita.com/hiro0218/feed.atom

Zenn

https://zenn.dev/[UserID]/feed

サンプル: https://zenn.dev/hiro/feed

実装

フィードをパースする

パースにはrss-parserを利用する。フィードのデータを Object として取り扱いができるようになる。

npm install --save rss-parser

import Parser from "rss-parser";

(async () => {
  const parser = new Parser();
  const feed = await parser.parseURL("https://zenn.dev/hiro/feed");
  console.log(feed.title);
})();

こんな感じで簡単に取得できる。

実装する

getStaticProps内でフィードにアクセスする。

interface Feed {
  title: string;
  link: string;
  isoDate: string;
}

interface Props {
  qiitaPosts: Array<Feed>;
  zennPosts: Array<Feed>;
}

const Home = ({ qiitaPosts, zennPosts }: Props) => {
  return (
    <>
      {qiitaPosts.map((post, index) => { /*  */ })}
      {zennPosts.map((post, index) => { /*  */ })}
    </>
  );
};

export default Home;

export const getStaticProps: GetStaticProps = async () => {
  const parser = new Parser();

  const feedQiita = await parser.parseURL('https://qiita.com/hiro0218/feed.atom');
  const feedZenn = await parser.parseURL('https://zenn.dev/hiro/feed');

  return {
    props: {
      qiitaPosts: feedQiita.items;,
      zennPosts: feedZenn.items,
    },
  };
};