microCMSとNext.js[App Router]でRSSを実装してみる。RSSはブログやニュース配信サイトでは必ず実装しておくべきものです。今回は以下の環境で実装します。

• Next.js 14.2.x
• microcms-js-sdk 3.1.x

.envで、サイト名、サイトの説明文、サイトのドメイン、microCMSのAPIキーを設定をしておきます。

SITE_URL=https://example.com
SITE_NAME=ゆかちぃのブログ
SITE_DISCRIPTION=ゆかちぃの日々を書き残すブログです♪
API_KEY={APIキー}

src/feed/route.ts に以下のように実装。タイトル、パーマリンク、サマリー、公開日の最低限の要素のみ実装しています。

APIスキーマは以下を想定します。

• 記事タイトル：title
• 本文：content
• パーマリンク：id
• 公開日：publishedAt

import { NextResponse } from 'next/server';
import { client } from '../libs/Client.js';
import { format } from 'date-fns';
export async function GET() {
const posts = await client.get({
 endpoint: 'post',
});
 const rss = `<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
 <channel>
  <title>${process.env.SITE_NAME}</title>
  <link>${process.env.SITE_URL}</link>
  <description>${process.env.SITE_DISCRIPTION}</description>
  ${posts.contents.map((post) => `
  <item>
   <title>${sanitizeStr(post.title)}</title>
   <link>${process.env.SITE_URL}/${post.id}</link>
   <description><![CDATA[${post.content}]]></description>
   <pubDate>${format(new Date(post.publishedAt), 'EEE, dd MMM yyyy HH:mm:ss xx')}</pubDate>
  </item>`).join('')}
 </channel>
</rss>`;
 return new NextResponse(rss, {
  headers: {
   'Content-Type': 'application/rss+xml',
  },
 });
}
function sanitizeStr(str: string): string {
 return String(str).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/'/g,"&apos;").replace(/"/g,"&quot;")
}

また、出力したRSSをすべてのページのhead要素内に設定し、このサイトではRSS配信しているよ！ということを認識させましょう。

<link rel="alternate" type="application/rss+xml" href="https://example.com/feed/" />

おしまい♥

タグ：JamstackmicroCMSNext.js