Next.js に feed を導入して RSS と Atom のフィードを生成しよう

はじめに

成果物

feed を採用した理由

参考：Next.js で動的に RSS フィードを生成する - Zenn

バージョン情報

• Node.js：15.11.0
• React：17.0.2
• Next.js：10.2.2
• feed：4.2.2
• marked：2.0.5

feed を導入

feed のインストール

# npm の場合
npm install --save-dev feed

# yarn の場合
yarn add --dev feed

# npm の場合
npm install --save-dev marked

# yarn の場合
yarn add --dev marked

フィード情報を集約する関数

// src/lib/feed.ts

import fs from 'fs';
import { Feed } from 'feed';
import marked from 'marked';

function generatedRssFeed(): void {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || '';
  const date = new Date();
  // author の情報を書き換える
  const author = {
    name: 'sample',
    email: 'sample@sample.com',
    link: 'https://...com',
  };

  // デフォルトになる feed の情報
  const feed = new Feed({
    title: process.env.NEXT_PUBLIC_BASE_NAME || '',
    description: process.env.NEXT_PUBLIC_BASE_DISC,
    id: baseUrl,
    link: baseUrl,
    language: 'ja',
    image: `${baseUrl}/favicon.png`,  // image には OGP 画像でなくファビコンを指定
    copyright: `All rights reserved ${date.getFullYear()}, ${author.name}`,
    updated: date,
    feedLinks: {
      rss2: `${baseUrl}/rss/feed.xml`,
      json: `${baseUrl}/rss/feed.json`,
      atom: `${baseUrl}/rss/atom.xml`,
    },
    author: author,
  });

  // ローカルファイルや API 経由などでファイルのデータを取得する関数を書く
  const posts = getPosts(...);

  // feed で定義した情報から各記事での変更点を宣言
  posts.forEach((post) => {
    // post のプロパティ情報は使用しているオブジェクトの形式に合わせる
    const url = `${baseUrl}/${post.id}`;
    feed.addItem({
      title: post.title,
      description: post.description,
      id: url,
      link: url,
      content: marked(post.content), // marked で markdown => html
      date: new Date(post.date),
    });
  });

  // フィード情報を public/rss 配下にディレクトリを作って保存
  fs.mkdirSync('./public/rss', { recursive: true });
  fs.writeFileSync('./public/rss/feed.xml', feed.rss2());
  fs.writeFileSync('./public/rss/atom.xml', feed.atom1());
  fs.writeFileSync('./public/rss/feed.json', feed.json1());
}

export default generatedRssFeed;

ビルド時にフィード情報を自動的に更新

// src/pages/index.tsx

// ...

export const getStaticProps: GetStaticProps = async () => {
  // フィード情報の生成
  generatedRssFeed();
  // ...
  return { props: { ... } };
};

動作確認

補足：URL が localhost:3000 となっている問題はローカル用の環境変数を使っているためであり、本番環境ではドメインが反映されるように私の手元では .env.development と .env.production に分けています。

Git の対象外に設定しておこう

# .gitignore

...

# rss feed
/public/rss/atom.xml
/public/rss/feed.json
/public/rss/feed.xml

...

Google Search Console へ登録

おわりに

RSS は読んでもらうための一工夫