iT邦幫忙

2022 iThome 鐵人賽
DAY 19
0
Modern Web

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列 第 19 篇

使用 feed 生成 RSS Feed - Modern Next.js Blog 系列 #19

14th鐵人賽 next.js rss blog nextjs
894 瀏覽

TL;DR

這是「Modern Blog 30 天」系列第 19 篇文章，上一篇我們做完 Sitemap 生成了，這篇接著來做非常相似的 RSS Feed 生成，讓部落格能被 RSS 訂閱。

這篇修改的程式碼如下：

https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/compare/day18-sitemap...day19-rss-feed

我的個人網站裡也有此系列的好讀版，程式碼更易讀、也支援深色模式和側邊目錄，歡迎前往閱讀！

加入 RSS Feed

安裝 feed 套件

pnpm add feed

修改 src/configs/siteConfigs.ts，新增 credit 和 email：

// ...
export const siteConfigs = {
  // ...
  credit: 'Stark Industries',
  email: 'stark@example.com',
};

新增 src/lib/generateRSS.ts：

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

import { siteConfigs } from '@/configs/siteConfigs';
import { allPostsNewToOld } from '@/lib/contentLayerAdapter';
import { getPostOGImage } from '@/lib/getPostOGImage';

export default function generateRSS() {
  const author = {
    name: siteConfigs.author,
    email: siteConfigs.email,
    link: siteConfigs.fqdn,
  };

  const feed = new Feed({
    title: siteConfigs.title,
    description: siteConfigs.description,
    id: siteConfigs.fqdn,
    link: siteConfigs.fqdn,
    image: siteConfigs.logoUrl,
    favicon: siteConfigs.logoUrl,
    copyright: `Copyright © 2015 - ${new Date().getFullYear()} ${
      siteConfigs.credit
    }`,
    feedLinks: {
      rss2: `${siteConfigs.fqdn}/feed.xml`,
      json: `${siteConfigs.fqdn}/feed.json`,
      atom: `${siteConfigs.fqdn}/atom.xml`,
    },
    author: author,
  });

  allPostsNewToOld.forEach((post) => {
    feed.addItem({
      id: siteConfigs.fqdn + post.path,
      title: post.title,
      link: siteConfigs.fqdn + post.path,
      description: post.description,
      image: getPostOGImage(post.socialImage),
      author: [author],
      contributor: [author],
      date: new Date(post.date),
      // content: post.body.html,
    });
  });

  writeFileSync('./public/feed.xml', feed.rss2());
  writeFileSync('./public/atom.xml', feed.atom1());
  writeFileSync('./public/feed.json', feed.json1());
}

修改 src/pages/index.tsx，將上面的 generateRSS() function 放進 getStaticProps 裡，在 pnpm build 時就會執行它來生成 RSS 檔案：

// ...
// 新增這行 Import
import generateRSS from '@/lib/generateRSS';

// ...

export const getStaticProps: GetStaticProps<Props> = () => {
  // ...
  
  // 新增下面這行
  generateRSS();

  return { props: { posts } };
};
// ...

修改 src/pages/_app.tsx，在全站加入 meta data 標註 RSS Feed 的路徑：

// ...
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider attribute="class">
      <DefaultSeo
        // ...
        additionalLinkTags={[
          {
            rel: 'icon',
            href: siteConfigs.logoPath,
          },
          // 加入下面這兩個 link tag
          {
            rel: 'alternate',
            type: 'application/rss+xml',
            href: '/feed.xml',
          },
          {
            rel: 'alternate',
            type: 'application/atom+xml',
            href: '/atom.xml',
          },
        ]}
      />

      <LayoutWrapper>
        <Component {...pageProps} />
      </LayoutWrapper>
    </ThemeProvider>
  );
}

export default MyApp;

修改 .gitignore、.eslintignore、.prettierignore，忽略生成的 RSS Feed：

# ...
# 加入下面這 3 條規則
# RSS related files (generated by generateRSS.js)
/public/atom.xml
/public/feed.xml
/public/feed.json

成果

完成了！使用 pnpm build，執行完就會看到 /public 路徑裡多了 atom.xml、feed.json 和 feed.xml 了，三種不同的 RSS 格式。

生成的內容如下：

public/atom.xml：

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app</id>
    <title>Next.js Tailwind Contentlayer Blog Starter</title>
    <updated>2022-10-04T15:38:07.971Z</updated>
    <generator>https://github.com/jpmonette/feed</generator>
    <author>
        <name>Tony Stark</name>
        <email>stark@example.com</email>
        <uri>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app</uri>
    </author>
    <link rel="alternate" href="https://nextjs-tailwind-contentlayer-blog-starter.vercel.app"/>
    <link rel="self" href="https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/atom.xml"/>
    <subtitle>Blog starter template with modern frontend technologies like Next.js, Tailwind CSS, Contentlayer, i18Next</subtitle>
    <logo>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/logo.png</logo>
    <icon>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/logo.png</icon>
    <rights>Copyright © 2015 - 2022 Stark Industries</rights>
    <entry>
        <title type="html"><![CDATA[Post with images]]></title>
        <id>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/post-with-images</id>
        <link href="https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/post-with-images"/>
        <updated>2022-09-02T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[My post with images]]></summary>
        <author>
            <name>Tony Stark</name>
            <email>stark@example.com</email>
            <uri>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app</uri>
        </author>
        <contributor>
            <name>Tony Stark</name>
            <email>stark@example.com</email>
            <uri>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app</uri>
        </contributor>
    </entry>
    <entry>
        <title type="html"><![CDATA[Post with code]]></title>
        <id>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/post-with-code</id>
        <link href="https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/post-with-code"/>
        <updated>2022-09-01T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[My post with code]]></summary>
        <author>
            <name>Tony Stark</name>
            <email>stark@example.com</email>
            <uri>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app</uri>
        </author>
        <contributor>
            <name>Tony Stark</name>
            <email>stark@example.com</email>
            <uri>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app</uri>
        </contributor>
    </entry>
    <entry>
        <title type="html"><![CDATA[Markdown demo]]></title>
        <id>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/markdown-demo</id>
        <link href="https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/markdown-demo"/>
        <updated>2022-08-31T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[This is a demo of Markdown]]></summary>
        <author>
            <name>Tony Stark</name>
            <email>stark@example.com</email>
            <uri>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app</uri>
        </author>
        <contributor>
            <name>Tony Stark</name>
            <email>stark@example.com</email>
            <uri>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app</uri>
        </contributor>
    </entry>
    <entry>
        <title type="html"><![CDATA[Sample post]]></title>
        <id>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/sample-post</id>
        <link href="https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/sample-post"/>
        <updated>2022-08-30T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[My first post]]></summary>
        <author>
            <name>Tony Stark</name>
            <email>stark@example.com</email>
            <uri>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app</uri>
        </author>
        <contributor>
            <name>Tony Stark</name>
            <email>stark@example.com</email>
            <uri>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app</uri>
        </contributor>
    </entry>
</feed>

public/feed.json：

{
    "version": "https://jsonfeed.org/version/1",
    "title": "Next.js Tailwind Contentlayer Blog Starter",
    "home_page_url": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app",
    "feed_url": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/feed.json",
    "description": "Blog starter template with modern frontend technologies like Next.js, Tailwind CSS, Contentlayer, i18Next",
    "icon": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/logo.png",
    "author": {
        "name": "Tony Stark",
        "url": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app"
    },
    "items": [
        {
            "id": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/post-with-images",
            "url": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/post-with-images",
            "title": "Post with images",
            "summary": "My post with images",
            "image": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/images/anita-chong-unsplash.jpg",
            "date_modified": "2022-09-02T00:00:00.000Z",
            "author": {
                "name": "Tony Stark",
                "url": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app"
            }
        },
        {
            "id": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/post-with-code",
            "url": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/post-with-code",
            "title": "Post with code",
            "summary": "My post with code",
            "image": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/og-image.png",
            "date_modified": "2022-09-01T00:00:00.000Z",
            "author": {
                "name": "Tony Stark",
                "url": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app"
            }
        },
        {
            "id": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/markdown-demo",
            "url": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/markdown-demo",
            "title": "Markdown demo",
            "summary": "This is a demo of Markdown",
            "image": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/og-image.png",
            "date_modified": "2022-08-31T00:00:00.000Z",
            "author": {
                "name": "Tony Stark",
                "url": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app"
            }
        },
        {
            "id": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/sample-post",
            "url": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/sample-post",
            "title": "Sample post",
            "summary": "My first post",
            "image": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/og-image.png",
            "date_modified": "2022-08-30T00:00:00.000Z",
            "author": {
                "name": "Tony Stark",
                "url": "https://nextjs-tailwind-contentlayer-blog-starter.vercel.app"
            }
        }
    ]
}

public/feed.xml：

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
    <channel>
        <title>Next.js Tailwind Contentlayer Blog Starter</title>
        <link>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app</link>
        <description>Blog starter template with modern frontend technologies like Next.js, Tailwind CSS, Contentlayer, i18Next</description>
        <lastBuildDate>Tue, 04 Oct 2022 15:38:07 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>Next.js Tailwind Contentlayer Blog Starter</title>
            <url>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/logo.png</url>
            <link>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app</link>
        </image>
        <copyright>Copyright © 2015 - 2022 Stark Industries</copyright>
        <item>
            <title><![CDATA[Post with images]]></title>
            <link>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/post-with-images</link>
            <guid>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/post-with-images</guid>
            <pubDate>Fri, 02 Sep 2022 00:00:00 GMT</pubDate>
            <description><![CDATA[My post with images]]></description>
            <author>stark@example.com (Tony Stark)</author>
            <enclosure url="https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/images/anita-chong-unsplash.jpg" length="0" type="image/jpg"/>
        </item>
        <item>
            <title><![CDATA[Post with code]]></title>
            <link>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/post-with-code</link>
            <guid>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/post-with-code</guid>
            <pubDate>Thu, 01 Sep 2022 00:00:00 GMT</pubDate>
            <description><![CDATA[My post with code]]></description>
            <author>stark@example.com (Tony Stark)</author>
            <enclosure url="https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/og-image.png" length="0" type="image/png"/>
        </item>
        <item>
            <title><![CDATA[Markdown demo]]></title>
            <link>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/markdown-demo</link>
            <guid>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/markdown-demo</guid>
            <pubDate>Wed, 31 Aug 2022 00:00:00 GMT</pubDate>
            <description><![CDATA[This is a demo of Markdown]]></description>
            <author>stark@example.com (Tony Stark)</author>
            <enclosure url="https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/og-image.png" length="0" type="image/png"/>
        </item>
        <item>
            <title><![CDATA[Sample post]]></title>
            <link>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/sample-post</link>
            <guid>https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/posts/sample-post</guid>
            <pubDate>Tue, 30 Aug 2022 00:00:00 GMT</pubDate>
            <description><![CDATA[My first post]]></description>
            <author>stark@example.com (Tony Stark)</author>
            <enclosure url="https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/og-image.png" length="0" type="image/png"/>
        </item>
    </channel>
</rss>

這篇修改的程式碼如下：

https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/compare/day18-sitemap...day19-rss-feed

References

下一篇

恭喜你完成了 RSS Feed 生成！

目前部落格該有的功能都具備了，已經是個可以實際上線的專案了。

但後面還有 11 天，我們當然不會止步於此。後面 11 天我們會繼續加入更多炫砲功能，繼續朝向 Modern Blog 前進。

下一篇我們會修改文章內文 heading 小標題樣式，為每個 heading 加入 anchor 連結！


上一篇
使用 next-sitemap 生成 Sitemap - Modern Next.js Blog 系列 #18
下一篇
為內文小標題加入 anchor 錨點連結 - Modern Next.js Blog 系列 #20
系列文
從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術 共 30 篇
  1. 26
    使用 kbar 加入 Command Palette 指令面板 - Modern Next.js Blog 系列 #26
  2. 27
    在 kbar Command Palette 實作文章搜尋 - Modern Next.js Blog 系列 #27
  3. 28
    使用 next-i18next 實作中英文多語系 - Modern Next.js Blog 系列 #28
  4. 29
    在 Next.js Contentlayer blog 實作舊路徑轉址 - Modern Next.js Blog 系列 #29
  5. 30
    總結與回顧：一個炫砲技術部落格的誕生 - Modern Next.js Blog 系列 #30
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙