Next.jsでRSS（feed）を作る

Web制作

Next.js

microCMS

2024/10/01このページはPRを含みます

完成イメージ

https://monaka496.com/feed.xml

事前準備

rssとfeedというライブラリがあるようだった。今回はfeedを利用した。

npm install feed

実装の流れ

ファイルを2つ作成する。1つは「/_libs/」ディレクトリの中に「feed.ts」を作成する。2つ目はapp直下に「feed.xml」というディレクトリを作成し、その配下に「route.ts」というファイルを作成した。

「feed.ts」に以下のように記述した

import { Feed } from "feed";
import { getAllNewsList } from "@/app/_libs/microcms";

export const generateRssFeed = async (): Promise<string> => {
  const baseUrl = "｛ブログのURLをいれる｝";
  const feed = new Feed({
    title: "｛ブログタイトルをいれる｝",
    description: "｛descriptionをいれる｝",
    id: baseUrl,
    link: baseUrl,
    language: "ja",
    copyright: "｛コピーライトをいれる｝",
    generator: baseUrl,
  });

  const posts = await getAllNewsList();

  posts.forEach((post) => {
    const publishDate = post.publishedAt
      ? new Date(post.publishedAt)
      : new Date();

    feed.addItem({
      title: post.title,
      description: post.description,
      date: publishDate,
      id: `${baseUrl}/blog/${post.id}`, //URLの体系が異なる場合は適宜変更
      link: `${baseUrl}/blog/${post.id}`,　//URLの体系が異なる場合は適宜変更
    });
  });

  return feed.rss2();
};

続いて「route.ts」には以下のように記述した

import { generateRssFeed } from "@/app/_libs/feed";

export const GET = async () => {
  const xml = await generateRssFeed();

  const response = new Response(xml, {
    status: 200,
    headers: {
      "Cache-Control": "s-maxage=86400, stale-while-revalidate", // 24時間キャッシュする
      "Content-Type": "text/xml",
    },
  });

  return response;
};

RSSの文法が正しいかチェック

https://validator.w3.org/feed/というサイトでチェックした。結果は無事問題なしの結果が出た。一部推奨事項が出たが今回はこのままOKとする

つまづいたところ（今回は未対応）

metaの情報は自分の場合、layout.tsxで扱っていたので、importしようとしたがうまくいかなかった。いつかうまいことまとめたいが、ブログタイトルもdescriptionもそんなに高頻度で変更しないので、直書きでもよいかと思ってそのままにした。（もし変えるとなってもそれほど工数変わらないので）