📰

【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 から使えるようになりました。

参考記事

零細IT社長, 7期目 & Next.js+microCMS, React Native+Expo, Firebase 🎹ピアノ、米国株投資

© 2020, Wataru All rights reserved.