Next.js製のブログにRSSを設定する

Next.js製のブログにRSSを設定しました。

結論

• API Routeからフィードを返す
• パスが気持ち悪いのでrewritesの設定で /feed -> /api/feedに

やり方

Next.jsのルーティングは、pages/ 以下に、パスに対応するファイル名にReactコンポーネントを置いて画面を表示することができます。では、画面じゃなくて今回のRSSのようなレスポンスを返すにはどうすればいいか。調べるとAPI Routesというものがあったので今回はそれを使いました。

API Routes

• API Routes: Introduction | Next.js

API routes provide a straightforward solution to build your API with Next.js.

だそうです。RSSファイル返していいものかちょっと微妙な感じもしますが、他に良さげな方法がなかったので使いました。ドキュメントに書かれている通り、/pages/api/feed.ts とかに書くと、/api/feed で配信されます。

そこに、以下のような処理を書きました。

// ...もろもろ省略

export default async (req, res) => {
  res.statusCode = 200;
  const posts = await fetchPosts();
  const feed = await generateFeed(posts);
  res.setHeader("Content-Type", "application/rss+xml;charset=utf-8");
  res.write(feed.xml());
  res.end();
};

パスのrewrites

ブログのフィードが /api/feed なのはなんとなく気持ち悪く、/feedにしたい。そこで、rewritesの設定を知りました。

• next.config.js: Rewrites | Next.js

以下のようにしました。

module.exports = {
  async rewrites() {
    return [
      {
        source: "/feed",
        destination: "/api/feed",
      },
    ];
  },
};

以上で、 https://blog.gaaamii.jp/feed でフィード情報を返すことができました。

その他の方法

• Next.jsで動的にRSSフィードを生成する

Pageコンポーネントにres.end書いちゃうのもOKみたいです。知らなかった。