【Next.js】microCMSからデータを取得してRSS2.0を実装する
Next.js + microCMS を使った RSS2.0 の 実装方法です。
api/rss.tsx に記述
rss.tsx
import { NextApiRequest, NextApiResponse } from "next"
export default async (req: NextApiRequest, res: NextApiResponse) => {
const data = await fetch(`https://xxxxx.microcms.io/api/v1/post`, {
headers: { "X-API-KEY": process.env.NEXT_PUBLIC_API_KEY || "" },
})
.then(res => res.json())
.catch(error => null)
if (!data) {
return res.status(401).json({ message: "Invalid slug" })
}
var itemList = ""
data.contents.map(
content =>
(itemList +=
"<item><title>" +
content.title +
"</title><link>https://xxxxx.com/xxxxx/" +
content.id +
"</link><description>" +
content.title +
"</description><pubDate>" +
content.publishedAt +
"</pubDate></item>")
)
var feed = ""
feed =
`<?xml version="1.0"?>
<rss version="2.0">
<channel>
<title>xxxxx</title>
<link>https://xxxxx.com/</link>
<description>xxxxx</description>
<language>ja</language>
<docs>https://xxxxx.com/api/rss</docs>
<generator>xxxxx 2.0</generator>
` +
itemList +
`
</channel>
</rss>`
res.statusCode = 200
res.setHeader("Content-Type", "text/xml; charset=utf-8")
res.end(feed)
}
これで rss.tsx にアクセスすると RSS が表示されます。 あとはお好みでカスタマイズしてください。
また、NEXT_PUBLIC_API_KEY
に関しては .env ファイル内で NEXT_PUBLIC_<NAMAE>
と指定したものになります。
v9.4 から使えるようになりました。