Next.jsのブログにRSS／Atomフィード組み込み→Googleサチコに登録

<rss
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:content="http://purl.org/rss/1.0/modules/content/" version="2.0">
  <channel>
    <title>ITC Engineering Blog</title>
    <link>https://itc-engineering-blog.netlify.app/</link>
    <description>豊田市のシステム開発会社 株式会社アイティーシーの技術情報発信ブログです。過去の知見、新たな知見を公開しています。ブログ自体のソースコードも公開しています。ご意見、ご感想は、お気軽にツイッターアカウントまで！</description>
    <lastBuildDate>Tue, 01 Feb 2022 09:54:32 GMT</lastBuildDate>
    <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
    <generator>Feed for Node.js</generator>
    <image>
      <title>ITC Engineering Blog</title>
      <url>https://itc-engineering-blog.netlify.app/favicon-32x32.png</url>
      <link>https://itc-engineering-blog.netlify.app/</link>
    </image>
    <copyright>All rights reserved 2022, 株式会社アイティーシー</copyright>
    <item>
      <title>
        <![CDATA[ Ubuntu 20.04 LTSのオンプレにKubernetes環境構築からnginx Pod稼働まで ]]>
      </title>
      <link>https://itc-engineering-blog.netlify.app/blogs/ubuntu-kubernetes</link>
      <guid>https://itc-engineering-blog.netlify.app/blogs/ubuntu-kubernetes</guid>
      <pubDate>Mon, 31 Jan 2022 12:55:33 GMT</pubDate>
      <description>
        <![CDATA[ Ubuntu 20.04 LTS のオンプレミス環境に Kubernetes 環境を構築しました。マスターノード、ワーカーノードを作成し、ワーカーノードにNginx Podを追加しました。そこまでの全手順です。 ]]>
      </description>
      <content:encoded>
        <![CDATA[ Ubuntu 20.04 LTS のオンプレミス環境に Kubernetes 環境を構築しました。マスターノード、ワーカーノードを作成し、ワーカーノードにNginx Podを追加しました。そこまでの全手順です。 ]]>
      </content:encoded>
      <author>*****@itccorporation.jp (株式会社アイティーシー)</author>
    </item>
    以降、同じように、
    <item>
      ・・・
    </item>
    を全ブログ記事分
  </channel>
</rss>

<feed
  xmlns="http://www.w3.org/2005/Atom">
  <id>https://itc-engineering-blog.netlify.app/</id>
  <title>ITC Engineering Blog</title>
  <updated>2022-02-01T09:54:32.395Z</updated>
  <generator>Feed for Node.js</generator>
  <author>
    <name>株式会社アイティーシー</name>
    <email>*****@itccorporation.jp</email>
    <uri>https://twitter.com/blog_itc</uri>
  </author>
  <link rel="alternate" href="https://itc-engineering-blog.netlify.app/"/>
  <link rel="self" href="https://itc-engineering-blog.netlify.app/rss/atom.xml"/>
  <subtitle>豊田市のシステム開発会社 株式会社アイティーシーの技術情報発信ブログです。過去の知見、新たな知見を公開しています。ブログ自体のソースコードも公開しています。ご意見、ご感想は、お気軽にツイッターアカウントまで！</subtitle>
  <logo>https://itc-engineering-blog.netlify.app/favicon-32x32.png</logo>
  <icon>https://itc-engineering-blog.netlify.app/favicon-32x32.png</icon>
  <rights>All rights reserved 2022, 株式会社アイティーシー</rights>
  <entry>
    <title type="html">
      <![CDATA[ Ubuntu 20.04 LTSのオンプレにKubernetes環境構築からnginx Pod稼働まで ]]>
    </title>
    <id>https://itc-engineering-blog.netlify.app/blogs/ubuntu-kubernetes</id>
    <link href="https://itc-engineering-blog.netlify.app/blogs/ubuntu-kubernetes"/>
    <updated>2022-01-31T12:55:33.946Z</updated>
    <summary type="html">
      <![CDATA[ Ubuntu 20.04 LTS のオンプレミス環境に Kubernetes 環境を構築しました。マスターノード、ワーカーノードを作成し、ワーカーノードにNginx Podを追加しました。そこまでの全手順です。 ]]>
    </summary>
    <content type="html">
      <![CDATA[ Ubuntu 20.04 LTS のオンプレミス環境に Kubernetes 環境を構築しました。マスターノード、ワーカーノードを作成し、ワーカーノードにNginx Podを追加しました。そこまでの全手順です。 ]]>
    </content>
    <author>
      <name>株式会社アイティーシー</name>
      <email>*****@itccorporation.jp</email>
      <uri>https://twitter.com/blog_itc</uri>
    </author>
    <contributor>
      <name>株式会社アイティーシー</name>
      <email>*****@itccorporation.jp</email>
      <uri>https://twitter.com/blog_itc</uri>
    </contributor>
  </entry>
  以降、同じように、
  <entry>
    ・・・
  </entry>
  を全ブログ記事分
</feed>

# npm install feed

# yarn add feed

import fs from 'fs';

import { Feed } from 'feed';

import { IBlogService, BlogService } from '@utils/BlogService'; //既存実装 ブログデータ取得用
import { IBlog, MicroCmsResponse } from '@/types/interface'; //既存実装 ブログデータ取得用
import settings from '@settings.yml'; //既存実装 設定取得用
//import { renderToString } from 'react-dom/server';//HTMLの出力は中止。（"試みてやめたこと"で後述）
//import { Markdown } from '@components/Markdown';//HTMLの出力は中止。（"試みてやめたこと"で後述）
//import React from 'react';//HTMLの出力は中止。（"試みてやめたこと"で後述）

export async function generateRssFeed(): Promise<void> {
  //asyncかつ、何も返さないため、型は、Promise<void>
  if (process.env.NODE_ENV === 'development') {
    //npm run devで発動しないようにする。
    return;
  }

  const service: IBlogService = new BlogService(); //既存実装 ブログデータ取得用
  const posts: MicroCmsResponse<IBlog> = await service.getBlogs(9999, 1); //ヘッドレスCMSから全コンテンツ取得
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL
    ? `${process.env.NEXT_PUBLIC_BASE_URL}/`
    : 'https://itc-engineering-blog.netlify.app/'; //URLの末尾に/が無いと、W3C Feed Validation Serviceで警告になるため、/付き
  const date = new Date();
  const author = {
    name: settings.rss.author.name, //Authorの値決め。YAMLの設定で可変。
    email: settings.rss.author.email,
    link: settings.rss.author.link, //link = ツイッターのURL（例：https://twitter.com/blog_itc）にした。
  };

  const feed = new Feed({
    //feedインスタンス初期化
    title: settings.general.name, //ブログタイトル。「ITC Engineering Blog」が設定してある。
    description: settings.general.description, //ブログ説明文。「ITC Engineering Blog」の紹介文が設定してある。
    id: baseUrl, //一意になれば良いと思うので、トップ画面のURL
    link: baseUrl, //トップ画面のURL
    image: `${baseUrl}favicon-32x32.png`, //適当。（目的が本気でフィードする目的ではないため。）
    favicon: `${baseUrl}favicon-32x32.png`, //適当。ただし、favicon.icoは、NGとの情報有り。
    copyright: `All rights reserved ${date.getFullYear()}, ${
      settings.rss.author.name
    }`, //例に書いてあった通り。
    updated: date, //現在日時。Next.jsの場合、ビルド日時。
    generator: 'Feed for Node.js', //指定しない場合は、'Feed for Node.js'のため、書いても書かなくても同じ。
    feedLinks: {
      rss2: `${baseUrl}rss/feed.xml`,
      json: `${baseUrl}rss/feed.json`,
      atom: `${baseUrl}rss/atom.xml`,
    }, //どの種類のフィードをどこに配置するか。
    author, //上でセットしたauthor。author: author, の意味。
  });

  posts.contents.forEach((post) => {
    //posts.contetntsには全記事情報が入っている。一つずつループ。
    const url = `${baseUrl}blogs/${post.id}`; //記事タイトル。<title>タグや、metaタグのtitleと同じ。
    const update_timestamp =
      (post.reflect_updatedAt && post.updatedAt) ||
      (post.reflect_revisedAt && post.revisedAt) ||
      post.publishedAt; //reflect_*は、更新日時を反映するかのフラグ。反映しないなら、publishedAt（初回公開日時）
    feed.addItem({
      title: post.title, //記事タイトル。<title>タグや、metaタグのtitleと同じ。
      id: url, //一意になれば良いと思うので、記事のURL
      link: url, //記事のURL
      description: post.description, //記事説明。metaタグのdescriptionと同じ。
      content: post.description, //記事説明。metaタグのdescriptionと同じ。（"試みてやめたこと"で後述）
      //content: renderToString(<Markdown source={post.content} />),//HTMLの出力は中止。（"試みてやめたこと"で後述）
      author: [author], //上でセットしたauthor。
      contributor: [author], //上でセットしたauthor。
      date: new Date(update_timestamp), //上で決めた更新日時か初回公開日時
    });
  });

  fs.mkdirSync('./public/rss', { recursive: true }); //./public/rssディレクトリ作成
  fs.writeFileSync('./public/rss/feed.xml', feed.rss2()); //rss2ファイル出力
  fs.writeFileSync('./public/rss/atom.xml', feed.atom1()); //atom1ファイル出力
  fs.writeFileSync('./public/rss/feed.json', feed.json1()); //json形式ファイル出力（今回特に必要無い。）
}

import Page, { getStaticProps } from './list/[[...slug]]';

export default Page;

export { getStaticProps };

export const getStaticProps: GetStaticProps<Props, Slug> = async ({
  params,
}) => {
  if (!params) await generateRssFeed();

import { renderToString } from 'react-dom/server';
import { Markdown } from '@components/Markdown';
import React from 'react';
・・・
    feed.addItem({
・・・
      content: renderToString(<Markdown source={post.content} />),
・・・