web

Next.jsとmicroCMSで動的にRSSフィードを生成する

公開日:2021年12月19日
最終更新日:2021年12月19日

以下の記事を参考にmicroCMSからデータを取得しRSSフィードを生成してみました。

Next.jsで動的にRSSフィードを生成する

必要なライブラリを追加

rss というnpmライブラリを使います。TypeScriptで書いているので @types/rss も追加します。

yarn add rss @types/rss


feed.tsxを作成

pages/feed.tsxを作成し、以下のように記述します。

import RSS from 'rss'
import { GetServerSidePropsContext } from 'next'
import { client } from '@/libs/client'
import { Blog } from '@/types/Blog' // 必要に応じて作ってください

async function generateFeedXml() {
  const feed = new RSS({
    title: '〇〇のフィード',
    description: '〇〇のフィード',
    site_url: 'https://〇〇〇〇〇〇.com',
    feed_url: 'https://〇〇〇〇〇〇.com/feed',
    language: 'ja',
  })

  const { contents } = await client.get({
    endpoint: 'blog',
  })

  contents?.forEach((post: Blog) => {
    feed.item({
      title: post.title,
      description: post.description,
      date: new Date(post.createdAt),
      url: `https://〇〇〇〇〇〇.com/blog/${post.category.id}/${post.id}`, // 適宜修正してください
    })
  })

  return feed.xml()
}


export const getServerSideProps = async ({
  res,
}: GetServerSidePropsContext) => {
  const xml = await generateFeedXml()

  res.statusCode = 200
  res.setHeader('Cache-Control', 's-maxage=86400, stale-while-revalidate')
  res.setHeader('Content-Type', 'text/xml')
  res.end(xml)

  return {
    props: {},
  }
}

const Page = () => null
export default Page


これで 自分のサイトURL/feed にRSSフィードが生成されます。

参考までにこのサイトのRSSは以下のようになってます
https://www.mismith.me/feed

About the author

大阪でフロントエンドエンジニアをしています。写真を撮るのが趣味です。よかったら500pxに載せてる写真も見てください。
web上に公開しているので、正確さに可能な限り努力してますが、個人の備忘録程度に書いてるので、ご自身の判断で参考程度に読んでください。
間違いやご意見があれば、コンタクトやSNSに気軽にご連絡ください。

Read next

Category

  • web
  • 雑記