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
関連記事
useAsyncData とそれを実現する Nuxt 3 の非同期処理の機構
2022/9/16
Nuxt Content V2 は Nuxt Bridge では動かない
2022/8/13
Mismatching childNodes vs. VNodes の原因と対処
2022/6/21