RSS Feed in a Next.js site
Tags: nextjs, rss, react
Published: 2021-05-08 08:03:56

---
title: RSS Feed in a Next.js site
published: true
date: 2021-04-19 00:00:00 UTC
tags: nextjs,rss,react
canonical_url: https://sreetamdas.com/blog/rss-for-nextjs
---

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

```shell
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](https://www.sanity.io).

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

```js
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](https://github.com/jpmonette/feed#example), and here's what your function to create your RSS feed will look like:

```js
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: "sreetam@sreetamdas.com",
    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

```js
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: "sreetam@sreetamdas.com",
    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`:

```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](https://sreetamdas.com/rss/feed.xml)!