Nuxt Content V2 で RSS フィードを作成する

Published: 2023/2/19


Nuxt Content V2 で作ったブログで RSS フィードを実装したので、その方法について記録する。

実装内容

Nuxt 3 からは http リクエストに対して nuxt を介さずに任意の処理を行う server/routes が利用できるようになった。 また、サーバー側にて Nuxt Content のクエリを実行する場合には、 serverQueryContent を利用できる。 RSS フィード形式の生成については、任意のライブラリを使えば良い。 自分の場合は feed のライブラリを使うことにした。 結果、 server/routes/rss.xml.ts を作成し、以下のように記述することで、 /rss.xml にてフィードを作成できる。

import { serverQueryContent } from '#content/server'
import { Feed } from 'feed'

const host = 'https://example.com'

export default defineEventHandler(async (event) => {
  const feed = new Feed({
    title: "Feed title",
    description: 'Feed of recent posts',
    id: host,
    link: host,
    copyright: 'John Doe'
  })

  const docs = await
    serverQueryContent(event, 'posts').sort({ date: -1 }).limit(10).find()

  docs.forEach((doc) => {
    const url = `${host}${doc._path}/`
    feed.addItem({
      title: doc.title!,
      id: url,
      link: url,
      description: doc.description,
      date: new Date(Date.parse(doc.date))
    })
  })

  return feed.rss2()
})

SSG を行っている場合、 nitro の prerender のパスにも nuxt.config.ts に追記する必要がある。

export default defineNuxtConfig({
  modules: [
    '@nuxt/content',
    // other modules
    // ...
  ],

  nitro: {
    prerender: {
      routes: [ '/rss.xml' ]
    }
  },

  // ...
  // other configs
})

結果

https://blog2.yukii.work/rss.xml

上記のように、 rss feed の XML が生成できることを確認した。


Tags: nuxtnuxt3nuxt-content

関連記事