RSS Feed in a Next.js site

RSS feeds are a great way for people to notify their readers that they've published new content! Instead of having to actively go and visit the websites to check if there are any new posts, the RSS alerts you when a website has been updated.

Here's how we can add a RSS feed to a Next.js site:

• Install the Feed package
• Get all our posts' data
• Create our RSS feed
• Call our function inside of getStaticProps

As I'll mention later, these above steps are what I used for my particular so your blog might require a slightly implementation, though the overall process remains the same!

SHELL
1yarn add feed
2
3# if you're using npm
4npm i feed

This step will vary depending on how/where you're storing your content — you may be using MDX like I am, or a CMS like Sanity.

In my case, I manage most of my content using MDX, each with a meta variable with metadata about the post.

JS
1export const getBlogPostsData = async () => {
2  // path where the MDX files are
3  const DIR = path.join(process.cwd(), "src", "content", "blog");
4  const files = fs
5    .readdirSync(DIR)
6    .filter((file) => file.endsWith(".mdx"));
7
8  const META = /export\s+const\s+meta\s+=\s+(\{(\n|.)*?\n\})/;
9  const postsData = files.map((file) => {
10    // grab the metadata
11    const name = path.join(DIR, file);
12    const contents = fs.readFileSync(name, "utf8");
13    const match = META.exec(contents);
14    if (!match || typeof match[1] !== "string")
15      throw new Error(`${name} needs to export const meta = {}`);
16    const meta = eval("(" + match[1] + ")");
17
18    // remove the ".mdx" from the filename
19    const slug = file.replace(/\.mdx?$/, "");
20
21    return {
22      ...meta,
23      slug,
24    };
25  });
26
27  return postsData;
28};

Again, you will need to modify this particular method as per your own preference, so please keep that in mind!

Thanks to the Feed package, this part is greatly simplified; you can check out the docs, and here's what your function to create your RSS feed will look like:

JS
1import { Feed } from "feed";
2import { getBlogPostsData } from "utils/blog";
3
4const generateRssFeed = async () => {
5  const posts = await getBlogPostsData();
6  const siteURL = process.env.SITE_URL;
7  const date = new Date();
8  const author = {
9    name: "Sreetam Das",
10    email: "sreetam@sreetamdas.com",
11    link: "https://twitter.com/_SreetamDas",
12  };
13
14  const feed = new Feed({
15    title: "Sreetam Das' blog",
16    description: "",
17    id: siteURL,
18    link: siteURL,
19    image: `${siteURL}/logo.svg`,
20    favicon: `${siteURL}/favicon.png`,
21    copyright: `All rights reserved ${date.getFullYear()}, Sreetam Das`,
22    updated: date,
23    generator: "Feed for Node.js",
24    feedLinks: {
25      rss2: `${siteURL}/rss/feed.xml`,
26      json: `${siteURL}/rss/feed.json`,
27      atom: `${siteURL}/rss/atom.xml`,
28    },
29    author,
30  });
31
32  posts.forEach((post) => {
33    const url = `${siteURL}/blog/${post.slug}`;
34
35    feed.addItem({
36      title: post.title,
37      id: url,
38      link: url,
39      description: post.summary,
40      content: post.summary,
41      author: [author],
42      contributor: [author],
43      date: new Date(post.publishedAt),
44    });
45  });
46};

and finally, we write the feed out to our filesystem

JS
1import fs from "fs";
2import { Feed } from "feed";
3import { getBlogPostsData } from "utils/blog";
4
5const generateRssFeed = async () => {
6  const posts = await getBlogPostsData();
7  const siteURL = process.env.SITE_URL;
8  const date = new Date();
9  const author = {
10    name: "Sreetam Das",
11    email: "sreetam@sreetamdas.com",
12    link: "https://twitter.com/_SreetamDas",
13  };
14
15  const feed = new Feed({
16    title: "Sreetam Das' blog",
17    description: "",
18    id: siteURL,
19    link: siteURL,
20    image: `${siteURL}/logo.svg`,
21    favicon: `${siteURL}/favicon.png`,
22    copyright: `All rights reserved ${date.getFullYear()}, Sreetam Das`,
23    updated: date,
24    generator: "Feed for Node.js",
25    feedLinks: {
26      rss2: `${siteURL}/rss/feed.xml`,
27      json: `${siteURL}/rss/feed.json`,
28      atom: `${siteURL}/rss/atom.xml`,
29    },
30    author,
31  });
32
33  posts.forEach((post) => {
34    const url = `${siteURL}/blog/${post.slug}`;
35
36    feed.addItem({
37      title: post.title,
38      id: url,
39      link: url,
40      description: post.summary,
41      content: post.summary,
42      author: [author],
43      contributor: [author],
44      date: new Date(post.publishedAt),
45    });
46  });
47
48  fs.mkdirSync("./public/rss", { recursive: true });
49  fs.writeFileSync("./public/rss/feed.xml", feed.rss2());
50  fs.writeFileSync("./public/rss/atom.xml", feed.atom1());
51  fs.writeFileSync("./public/rss/feed.json", feed.json1());
52};

Sweet! now that we have everything ready, we just need to make sure that our function is run at build time — so you can call it in the getStaticProps function of one of your pages, like index.jsx:

JSX
1export const getStaticProps = async (_context) => {
2  await generateRssFeed();
3
4  return {
5    // ...
6  };
7};

and that's it! whenever our site is built and deployed, our RSS feed will be created and updated as well. You can check out the result live!