Next.jsのサイトにRSSフィードを実装する

この記事でのゴール

Next.jsのサイトにRSSのフィードを実装する。

ここではブログの投稿をRSSフィードに表示することとします。

前提条件

以下をインストール済みであること

• Node.js(16系)
• npm または yarn

使うもの

• Next.js(ver. 12.1)
• rss(ver. 1.2.2)
• Server Side Renderingができる環境

やること

1. RSSフィードを表示するページを用意する
2. 1にRSSフィードを実装する
3. headタグ内にfeedのURLを追加する

1. RSSフィードを表示するページを用意する

/pages/ 以下に feed.tsx というファイルを作成。

2. 1にRSSフィードを実装する

rssのオプションはライブラリの説明を参照

import { GetServerSidePropsContext } from 'next'
import RSS from 'rss'

// ブログの記事を取得
const getBlogPosts = async () => { // 省略 }

interface GenerateRssResponse {
  xml: string | null
}

const generateRss = async (): Promise<GenerateRssResponse> => {
  const siteUrl = '' // サイトのURL

  const feed = new RSS({
    title: '',
    description: '',
    feed_url: '',
    site_url: '',
    image_url: '',
    managingEditor: '',
    webMaster: '',
    copyright: '',
    language: 'ja',
    categories: [], 
  })

  try {
    const blogItems = await getBlogPosts()
    if (blogItems.errors.length > 0) {
      return {
        xml: null
      }
    }

    blogItems.blogs.forEach((blog: BlogItem) => {
      const description = ''
      const ogImageUrl = ''
    
      feed.item({
        title: blog.title,
        description: '',
        date: new Date(blog.createdAt),
        url: `${siteUrl}/blog/${blog.id}`,
        author: '',
        enclosure: {
          url: ogImageUrl
        }
      })
    })
  } catch (e) {
    return {
      xml: null
    }
  }

  return {
    xml: feed.xml()
  }
}

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

  res.statusCode = xml ? 200 : 401
  if (!xml) {
    res.end()
  }
  if (xml) {
    res.setHeader('Cache-Control', 's-maxage=86400, stale-while-revalidate')
    res.setHeader('Content-Type', 'text/xml')
  }
  res.end(xml)

  return {
    props: {}
  }
}

const FeedPage = () => null

export default FeedPage

3. headタグ内にfeedのURLを追加する

const siteUrl = '' // サイトのURL

<link rel="alternate" type="application/rss+xml" title='**ここにRSSフィードのタイトルを入れる**' href={`${siteUrl}/feed`} />