chakkun1121's blog

nextjsでRSSフィールドの追加方法

投稿日:2023/9/30

環境

package.json(一部のみ)

1{
2  "dependencies": {
3    "next": "13.5.3",
4    "react": "18.2.0",
5    "react-dom": "18.2.0",
6    "typescript": "^5.2.2"
7  }
8}

設置方法

1.RSSというパッケージのインストール

1# npmの場合
2npm install rss @types/rss
3# yarnの場合
4yarn add rss @types/rss
5# pnpmの場合
6pnpm add rss @types/rss

2.app/rss.xml/route.tsを作成する

1import RSS from "rss";
2
3export async function GET() {
4  const articles = await getArticlesData();
5  const feed = new RSS({
6    title: siteTitle,
7    description: siteDescription,
8    site_url: siteUrl,
9    feed_url: siteUrl + "/rss.xml",
10  });
11  articles.forEach((article) => {
12    feed.item({
13      title: article.title,
14      description: article.description,
15      url: siteUrl + article.link,
16      date: article.date,
17    });
18  });
19
20  return new Response(feed.xml(), {
21    headers: {
22      "Content-Type": "application/xml",
23    },
24  });
25}

記事の取得欄はそれぞれ適切に書き換えてください。

最後に

この処理だけでrssフィールドを追加できます。SSGにも対応しています。そのためこのブログにもRSSフィールドを追加しました。。