Next.jsにRSSとsitemapを導入した

参考

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

Generate RSS feeds for your static Next.js blog

Next.js に next-sitemap を導入して超手軽にサイトマップ sitemap.xml を生成しよう

next-sitemap公式GitHub

1npm install feed

getStaticPropsを叩いてるページでその中で後述のfeed.tsをgenerateRssFeedとして呼び出す。

pages/Index.tsx

1import generateRssFeed from "../libs/feed";
2
3export const getStaticProps: GetStaticProps = async () => {
4  await generateRssFeed();
5  const data: EntryCollection<IPostFields> = await client.getEntries({
6    content_type: "blog",
7    order: "-fields.date",
8    limit: 10,
9  });
10  return {
11    props: {
12      blog: data.items,
13    },
14  };
15};
16
17export default Index;

libs/feed.ts

1import fs from "fs";
2import { Feed } from "feed";
3import client from "../libs/contentful";
4import { EntryCollection } from "contentful";
5import { IPostFields } from "../libs/types";
6
7async function generateRssFeed() {
8  const baseUrl = "https://sou-web.net";
9  const date = new Date();
10  const author = {
11    name: "Sou Watanabe",
12    email: "[email protected]",
13    link: baseUrl,
14  };
15
16  const feed = new Feed({
17    title: "sou-web.net",
18    id: baseUrl,
19    link: baseUrl,
20    description: "Sou Watanabeのメモ兼用ウェブアプリケーション。",
21    language: "ja",
22    image: `${baseUrl}/images/logo.svg`,
23    favicon: `${baseUrl}/favicon.ico`,
24    copyright: `All rights reserved ${date.getFullYear()}, Sou Watanabe`,
25    updated: date,
26    generator: "Next.js using Feed for Node.js",
27    feedLinks: {
28      rss2: `${baseUrl}/rss/feed.xml`,
29      json: `${baseUrl}/rss/feed.json`,
30      atom: `${baseUrl}/rss/atom.xml`,
31    },
32    author,
33  });
34
35  const entries: EntryCollection<IPostFields> = await client.getEntries({
36    content_type: "blog",
37    order: "-fields.date",
38    limit: 1000,
39  });
40
41  entries.items.forEach((blog) => {
42    const url = `${baseUrl}/${`/docs/${blog.fields.slug}`}`;
43    feed.addItem({
44      title: blog.fields.title,
45      id: url,
46      link: url,
47      description: blog.fields.description,
48      date: new Date(blog.fields.date),
49      author: [author],
50    });
51  });
52  fs.mkdirSync("./public/rss", { recursive: true });
53  fs.writeFileSync("./public/rss/feed.xml", feed.rss2());
54  fs.writeFileSync("./public/rss/atom.xml", feed.atom1());
55  fs.writeFileSync("./public/rss/feed.json", feed.json1());
56}
57
58export default generateRssFeed;

これでpublicにrssというフォルダが生成されその中にfeed.xmlとjson、atom.xmlが生成される。 fs.writeFileSyncはその通りにgetStaticPropsはgetServersidePropsと違って動的変更に弱いがこのfsが読み込んで同期処理でカバーしている。

1npm install next-sitemap

プロジェクトディレクトリ直下にconfig.jsファイルを作成。

sitemap.config.js

1module.exports = {
2  siteUrl: "https://sou-web.net",
3  generateRobotsTxt: true,
4};

自分は最小限にしたかったのでこんな感じにした。

あとはpackage.jsonでビルド時にこれを走らせるように設定。

package.json

1  "scripts": {
2    "dev": "next dev",
3    "build": "next build && next-sitemap --config sitemap.config.js",
4    "start": "next start",
5    "export": "next export",
6    "lint": "next lint"
7  },

buildに && next-sitemap --config sitemap.config.js"を追加。

&&は左辺も右辺もtrueの時にtrueという命令。

これでpublicにrobots.txtとsitemap.xmlとsitemap-0.xmlが生成される。 sitemap-0というのは本の区切りみたいなもので一定の収録を終えたら次のsitemap-1が生成される。

RSSとsitemapってなに?

RSSはフィードとしてGoogleReederなどに昔からあった機能で、登録しておくと更新が見れるようになっています。なのでリーダーアプリなどで見たいブログを登録して置いて更新したときだけ通知で見るようにする使い方が一般的です。

sitemapはGoogle Search Consoleに登録することによって検索キーワードを分析したりできます。

ブログやWEBサイトには必須の機能だと思うのでよかったら導入してみてください。