Next.js(AppRouter)上から外部のRSSを呼び出す機会があったので、調べてみました。RSSとは、ブログやニュースサイトの更新情報を配信するための仕組みで、WordPressなどのブログやNoteなど文章配信サービスで利用されています。RSSをはXML形式で配信されているのでXMLを解析できればどんな環境でも使えます。もちろんRSSはこのブログでも配信しています。

今回は以下の環境で実装しました。

• Next.js(AppRouter) 14.3.x
• rss-parser 3.13.x

RSSはRSS 2.0を対象とし、以下のようなXMLフォーマットを前提とします。

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
 <channel>
  <title>サイト名</title>
  <link>サイトURL</link>
  <description>サイト説明文</description>
  <item>
   <title><![CDATA[記事タイトル]]></title>
   <pubDate>公開日付</pubDate>
   <link>記事URL</link>
   <description><![CDATA[記事の要約]]></description>
  </item>
  ・
  ・
 </channel>
</rss>

まずNext.jsでRSSを扱うために予めRSSをパースするモジュールをインストールします。

$ npm i rss-parser

Next.jsのpage.jsに以下のようにコードを入れます（注意：日時処理用にdate-fnsのモジュールを使っています）。

import parse from 'rss-parser';
import { format } from 'date-fns';
async function getRssFeed(url) {
 const parser = new parse();
 try {
  const feed = await parser.parseURL(url);
  return feed.items;
 } catch (error) {
  console.error('Error:', error);
  return [];
 }
}
export default async function Home() {
 const items = await getRssFeed('{RSSフィードのURL}');
 return (
 <main>
  <ul>
  {items.map((item) => (
   <li key={item.link}>
    <a href={item.link}>
     <h3>{item.title}</h3>
     <time>{format(new Date(item.pubDate), 'yyyy年MM月dd日')}</time>
    </a>
   </li>
  ))}
  </ul>
 </main>
 );
}

実行するとこのように表示されます（デザインは個別にCSSで設定ください）。

RSSはやはり便利ですね。

おしまい♥

タグ：Next.jsnpm(Node.js)XML