Next.js（App Router）でRSSフィードを実装する 📡

Next.js（App Router）で作成したポートフォリオサイトにRSSフィードを実装してみました。

https://kimizuka.fm/rss.xml

キャッシュの設定が適切にできているかに不安が残りますが、実装方法をメモしておきます。
今回はサイトをデプロイするたびに、ルート直下に rss.xml を生成することをゴールと設定しました。

使ったライブラリ

www.npmjs.com
www.npmjs.com

調査した感じ、Node.jsでRSSフィードを実装する場合、rss か feed のどちらかを使うのが一般的なようですが、まずは rss から試してみて、feed を試すことなく、結局そのまま採用しました。

なので、のちに feed に差し替えるかもしれません。

ソースコード（抜粋）

src/app/rss.xml/route.ts

import { description, title } from '@/scripts/metadata'; // サイトのメタデータ
import { getArticles } from '@/scripts/microcms'; // microCMSから記事一覧を取得するスクリプト
import Rss from 'rss';

const url = String(process.env.NEXT_PUBLIC_BASE_URL); // サイトのURL

export const revalidate = 60 * 60 * 24 * 1; // 1日キャッシュする

export async function GET() {
  const feed = new Rss({
    title,
    description,
    feed_url: `${ url }/rss.xml`,
    site_url: url,
    language: 'ja'
  });

  const { contents } = await getArticles();

  // 記事一覧をRSSフィードに追加
  for (let i = 0; i < contents.length; ++i) {
    feed.item({
      title: contents[i].title,
      description: `${ contents[i].description.description }`, // HTML
      url: `${ url }/${ contents[i].url }`,
      date: contents[i].updatedAt
    });
  }

  return new Response(feed.xml(), {
    headers: {
      'Content-Type': 'application/xml',
      'Cache-Control': `s-maxage=${ revalidate }, stale-while-revalidate`
    }
  });
}