Nuxt.jsでRSSフィードを作成する

RSSフィードを作成する機会があったので、@nuxtjs/feedの設定方法を試してみます。

設定方法

以前作成したデモサイトを使って、新着情報の記事をRSSフィードとして表示するように設定してみます

まずはNuxt.jsの環境にインストールします。

yarn add @nuxtjs/feed

npmの場合は下記になります。

npm install @nuxtjs/feed

nuxt.config.jsのmodulesに@nuxtjs/feedの追加と、feedの項目を新しく追加します。

export default {
  modules: [
    '@nuxtjs/feed'
  ],
  feed: [
    // ここにfeedの設定を追加する
  ]
}

feedの項目に設定を追加します。

const axios = require('axios');
export default {
  feed: [
    {
      path: '/feed.xml', // フィードのパス
      async create(feed) { // フィードの内容の設定
         // フィードの全体の設定
        feed.options = {
          title: 'サイト名',
          link: 'https://example.com/',
          description: '説明文'
        }
        // フィードに表示する記事の取得
        const posts = await axios.get(
          process.env.API_URL,
          {
            headers: {
              'X-API-KEY': process.env.API_KEY
            }
          }
        )
        // 各記事をフィードに追加
        posts.data.contents.forEach(post => {
          feed.addItem({
            title: post.title,
            id: post.id,
            link: `https://example.com/info/${post.id}`,
            content: post.body
          })
        })
      },
      cacheTime: 1000 * 60 * 15, // フィードをキャッシュする期間
      type: 'rss2' // フィードの種類を'rss2','atom1','json1' から選択
    }
  ]
}

/feed.xml にアクセスして確認すると、以下のように表示が確認できました。

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>サイト名</title>
        <link>https://example.com/</link>
        <description>説明文</description>
        <lastBuildDate>Mon, 21 Mar 2022 06:56:22 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/nuxt-community/feed-module</generator>
        <item>
            <title><![CDATA[新着情報F]]></title>
            <link>https://example.com/info/z4yk0ox_tqa</link>
            <guid>z4yk0ox_tqa</guid>
        </item>
        <item>
            <title><![CDATA[新着情報E]]></title>
            <link>https://example.com/info/1hpnqckp0j_i</link>
            <guid>1hpnqckp0j_i</guid>
        </item>
        <item>
            <title><![CDATA[新着情報D]]></title>
            <link>https://example.com/info/e5evol2afqgv</link>
            <guid>e5evol2afqgv</guid>
        </item>
        <item>
            <title><![CDATA[新着情報C]]></title>
            <link>https://example.com/info/6irp7tjwo_qj</link>
            <guid>6irp7tjwo_qj</guid>
        </item>
        <item>
            <title><![CDATA[新着情報B]]></title>
            <link>https://example.com/info/v249mt0p71</link>
            <guid>v249mt0p71</guid>
            <content:encoded><![CDATA[<p>テストテスト</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[新着情報A]]></title>
            <link>https://example.com/info/3hn_7p6e1m</link>
            <guid>3hn_7p6e1m</guid>
            <content:encoded><![CDATA[<p>新着情報の本文です。<br>テストテストテスト</p>]]></content:encoded>
        </item>
    </channel>
</rss>