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!

Install packages

yarn add feed

# if you're using npm
npm i feed

Get posts' data

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.

export const getBlogPostsData = async () => {
  // path where the MDX files are
  const DIR = path.join(process.cwd(), "src", "content", "blog");
  const files = fs
    .readdirSync(DIR)
    .filter((file) => file.endsWith(".mdx"));

  const META = /export\s+const\s+meta\s+=\s+(\{(\n|.)*?\n\})/;
  const postsData = files.map((file) => {
    // grab the metadata
    const name = path.join(DIR, file);
    const contents = fs.readFileSync(name, "utf8");
    const match = META.exec(contents);
    if (!match || typeof match[1] !== "string")
      throw new Error(`${name} needs to export const meta = {}`);
    const meta = eval("(" + match[1] + ")");

    // remove the ".mdx" from the filename
    const slug = file.replace(/\.mdx?$/, "");

    return {
      ...meta,
      slug,
    };
  });

  return postsData;
};

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

Create an RSS feed

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:

import { Feed } from "feed";
import { getBlogPostsData } from "utils/blog";

const generateRssFeed = async () => {
  const posts = await getBlogPostsData();
  const siteURL = process.env.SITE_URL;
  const date = new Date();
  const author = {
    name: "Sreetam Das",
    email: "[e-mail]",
    link: "https://twitter.com/_SreetamDas",
  };

  const feed = new Feed({
    title: "Sreetam Das' blog",
    description: "",
    id: siteURL,
    link: siteURL,
    image: `${siteURL}/logo.svg`,
    favicon: `${siteURL}/favicon.png`,
    copyright: `All rights reserved ${date.getFullYear()}, Sreetam Das`,
    updated: date,
    generator: "Feed for Node.js",
    feedLinks: {
      rss2: `${siteURL}/rss/feed.xml`,
      json: `${siteURL}/rss/feed.json`,
      atom: `${siteURL}/rss/atom.xml`,
    },
    author,
  });

  posts.forEach((post) => {
    const url = `${siteURL}/blog/${post.slug}`;

    feed.addItem({
      title: post.title,
      id: url,
      link: url,
      description: post.summary,
      content: post.summary,
      author: [author],
      contributor: [author],
      date: new Date(post.publishedAt),
    });
  });
};

and finally, we write the feed out to our filesystem

import fs from "fs";
import { Feed } from "feed";
import { getBlogPostsData } from "utils/blog";

const generateRssFeed = async () => {
  const posts = await getBlogPostsData();
  const siteURL = process.env.SITE_URL;
  const date = new Date();
  const author = {
    name: "Sreetam Das",
    email: "[e-mail]",
    link: "https://twitter.com/_SreetamDas",
  };

  const feed = new Feed({
    title: "Sreetam Das' blog",
    description: "",
    id: siteURL,
    link: siteURL,
    image: `${siteURL}/logo.svg`,
    favicon: `${siteURL}/favicon.png`,
    copyright: `All rights reserved ${date.getFullYear()}, Sreetam Das`,
    updated: date,
    generator: "Feed for Node.js",
    feedLinks: {
      rss2: `${siteURL}/rss/feed.xml`,
      json: `${siteURL}/rss/feed.json`,
      atom: `${siteURL}/rss/atom.xml`,
    },
    author,
  });

  posts.forEach((post) => {
    const url = `${siteURL}/blog/${post.slug}`;

    feed.addItem({
      title: post.title,
      id: url,
      link: url,
      description: post.summary,
      content: post.summary,
      author: [author],
      contributor: [author],
      date: new Date(post.publishedAt),
    });
  });

  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());
};

Run our function inside getStaticProps

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:

export const getStaticProps = async (_context) => {
  await generateRssFeed();

  return {
    // ...
  };
};

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!