📰

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

参考記事

零細CEO兼プログラマー投資家ピアニスト。老後は曾孫達の前でグランドピアノをエレガントに弾きこなしドヤって逝くのを夢みるフルータリアンな人。とっても冷え性。Next.js+microCMS, React Native+Expo, Firebase, TailwindCSS #XRP

© 2021, Ru- All rights reserved.