Next.jsのAppRouterでRSSを作成する

2024/03/17 荒井雄治朗

RSSフィードリーダーはもうあまり使われている話を聞かないが、RSSにはまだ可能性を感じているので、このサイトにもRSSフィードを設置する。

仕様

https://www.anytools.app/articles/feed.xml にアクセスすると全ての記事が入ったRSSフィードを返す

記事データはjsのオブジェクトで用意したものを読み取る

export const articles = [
  {
    id: 'kijino-sakusei-ni-mdx-wo-tsukau-kotoni-shita',
    title: '記事の作成にMDXを使うことにした',
    description: 'ヘッドレスCMSを使ったりしようと迷ったけど、結局MDXで記事を書いた。結構良かった。',
    date: '2024/03/16',
    author: '荒井雄治朗',
  },
  {
    id: 'nextjs-app-router-saikou',
    title: 'Next.jsのAppRouter最高',
    description: 'Next.jsのAppRouterも作った人も最高だったので記事にした。',
    date: '2024/03/15',
    author: '荒井雄治朗',
  },
  :
  :
]

ルートを用意する

Next.jsにRSSの公式サポートはないので、route.jsの仕組みを使ってRSSを返すルートを作る。

src/app/articles/feed.xml/route.ts

export async function GET(request: Request) {
  return new Response('OK', {
    headers: {
      'Content-Type': 'application/atom+xml; charset=utf-8',
    },
  });
}

rssのライブラリをインストールする

インターネットで調べると、みんな大体rssというnpmを使ってるので真似する。

pnpm add rss
pnpm add -D @types/rss // 型定義

rssのxmlを作る

npmのrssを使ってRSSフィードを作ってレスポンスする。

import { articles } from "@/app/articles";
import RSS from "rss";
 
export async function GET() {
  const feed = new RSS({
    title: '株式会社anytools ブログ',
    description: '株式会社anytoolsのブログ',
    site_url: 'https://www.anytools.app',
    feed_url: 'https://www.anytools.app/articles/feed.xml',
    copyright: '株式会社anytools',
    language: 'ja',
    pubDate: new Date().toISOString(),
  });
 
  for (const article of articles) {
    const [year, month] = article.date.split('/');
    feed.item({
      title: article.title,
      description: article.description,
      url: `https://www.anytools.app/articles/${year}/${month}/${article.id}`,
      date: new Date(article.date),
    });
  }
 
  return new Response(feed.xml({ indent: true }), {
    headers: {
      'Content-Type': 'application/atom+xml; charset=utf-8',
    },
  });
}

RSSを見つけやすくするためにサイトのヘッドタグにrssフィードのURLを設置する

FeedリーダーとかでRSSフィードを見つけやすくするために全ページのheadタグにここにRSSフィードがあるよっていうタグを追加する。

<link rel="alternate" type="application/atom+xml" href="https://www.anytools.app/articles/feed.xml">

Feed Validation Service でできたフィードを検証する

ここで、Feedが正しい形式で作られているかを検証できる。 https://validator.w3.org/feed/#validate_by_input