How to add RSS feed in Next.js Blog

Jatin Sharma - May 16 '22 - - Dev Community

In this article, I will explain how you can create an RSS feed for your Next.js application in XML and JSON format. So without further delay, let's get into it.

Table of Contents

what is RSS?

An RSS (Really Simple Syndication) feed is a file that contains a summary of updates from a website, often in the form of a list of articles with links.

In my case, I am creating an RSS feed for my blogs to show the latest blogs as the site updates. The user doesn't need to visit to check if there is an update or a new blog. RSS sends you the notification or shows the list of updates. You can use RSS Feed Reader chrome extension to manage your feed.

What do we need?

  • We need all the blogs' data
  • install the feed package
  • Create RSS Feed

Method-1

Getting the Blogs' data

I am assuming you already have your blog page where all the blogs are listed. I am using MDX for managing the blog content. You might be using the same or anything else that doesn't matter. The main thing is you need to have an array containing all the blogs.

As I am using the MDX, that's how I fetch all my blogs of mine.

// lib/posts.js

export function getAllPosts() {
  const posts = getSlugs()
    .map((slug) => {
      return getFrontMatter(slug);
    })
    .filter((post) => post != null || post != undefined) // Filter post if it is not published
    .sort((a, b) => {
      if (new Date(a.date) > new Date(b.date)) return -1;
      if (new Date(a.date) < new Date(b.date)) return 1;
      return 0;
    });
  return posts;
}
Enter fullscreen mode Exit fullscreen mode

The above function gets all the blogs by fetching all the slugs and the for every slug it returns the frontMatter of that blog and then sorted it in descending order by date, which contains information like title, publishedDate, excerpt, etc. Now we use this information to create the RSS feed.

Install the feed package

It's very simple, you just have to install the package called feed to create RSS. You can install it with npm or yarn, whatever you prefer.

yarn add feed
# or
npm i feed
Enter fullscreen mode Exit fullscreen mode

Create RSS Feed

To generate the RSS feed we create a function called generateRssFeed. You can change the name if you want.

import packages

First, we import all the important packages or functions

// lib/generateRssFeed.js
import fs from "fs";
import { Feed } from "feed";
import { getAllPosts } from "./posts";
Enter fullscreen mode Exit fullscreen mode

Create a function

Creating a function called generateRssFeed and we are exporting it, which I'll talk about later in this article.

// lib/generateRssFeed.js

export default async function generateRssFeed() {}
Enter fullscreen mode Exit fullscreen mode

get the initial information

Now we add the following information in the above function such as all the blogs, today's date, and the author and the siteURL.

// lib/generateRssFeed.js

const posts = getAllPosts();
const siteURL = process.env.VERCEL_URL;
const date = new Date();
const author = {
  name: "John Doe",
  email: "example@gmail.com",
  link: "https://twitter.com/<username>",
};
Enter fullscreen mode Exit fullscreen mode

In the above code, I've used the process.env.VERCEL_URL as the siteURL. You might be wondering why I used that. In my case, I am using vercel to host my website. So we need to pass the siteURL to the RSS. In the production or Preview in Vercel, it provides us the environment variable called VERCEL_URL which is nothing but your site root URL. For example https://google.com. We need the root URL for the production as well as the development phase because we need to check if our RSS is working or not. That's why I've chosen VERCEL_URL as the environment variable. My .env.local looks like this-

# .env.example
VERCEL_URL=http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

You don't need to define that in your production if you are also using the Vercel as a hosting platform. Otherwise, you can simply add your site root URL.

After that, we will create a feed 

// lib/generateRssFeed.js

const feed = new Feed({
  title: "Your Blog name",
  description: "Your Blog description",
  id: siteURL,
  link: siteURL,
  image: `${siteURL}/favicon.ico`,
  favicon: `${siteURL}/favicon.ico`,
  copyright: `All rights reserved ${date.getFullYear()}, Jatin Sharma`,
  updated: date, // today's date
  generator: "Feed for Node.js",
  feedLinks: {
    rss2: `${siteURL}/rss/feed.xml`,  // xml format
    json: `${siteURL}/rss/feed.json`,// json fromat
  },
  author,
});
Enter fullscreen mode Exit fullscreen mode

The above code creates an RSS feed in XML and JSON format.

Add Blogs to the Feed

Now, as our feed is created, we just need to add all the blogs in that feed. To do that, we loop through the array of blogs and add the blog to the feed. The following code shows how you can do it.

// lib/generateRssFeed.js

posts.forEach((post) => {
  const url = `${siteURL}/blog/${post.slug}`;
  feed.addItem({
    title: post.title,
    id: url,
    link: url,
    description: post.excerpt,
    content: post.excerpt,
    author: [author],
    contributor: [author],
    date: new Date(post.date),
  });
});
Enter fullscreen mode Exit fullscreen mode

This code is straight forward and we just add the important data to the feed.

Write the RSS files in the public folder

After all this, we just need to make an xml and json file. The following code will create xml and json files for the RSS feed.

// lib/generateRssFeed.js

fs.mkdirSync("./public/rss", { recursive: true });
fs.writeFileSync("./public/rss/feed.xml", feed.rss2());
fs.writeFileSync("./public/rss/feed.json", feed.json1());
Enter fullscreen mode Exit fullscreen mode

Now our work is almost completed. And our generateRssFeed.js looks something like this -

// lib/generateRssFeed.js

import fs from "fs";
import { Feed } from "feed";
import { getAllPosts } from "./posts";

export default async function generateRssFeed() {
  const posts = getAllPosts();
  const siteURL = process.env.VERCEL_URL;
  const date = new Date();
  const author = {
    name: "John Doe",
    email: "example@gmail.com",
    link: "https://twitter.com/<username>",
  };

  // Creating feed
  const feed = new Feed({
    title: "Your Blog name",
    description: "Your Blog description",
    id: siteURL,
    link: siteURL,
    image: `${siteURL}/favicon.ico`,
    favicon: `${siteURL}/favicon.ico`,
    copyright: `All rights reserved ${date.getFullYear()}, Jatin Sharma`,
    updated: date, // today's date
    generator: "Feed for Node.js",
    feedLinks: {
      rss2: `${siteURL}/rss/feed.xml`, // xml format
      json: `${siteURL}/rss/feed.json`, // json fromat
    },
    author,
  });

  // Adding blogs to the rss feed
  posts.forEach((post) => {
    const url = `${siteURL}/blog/${post.slug}`;
    feed.addItem({
      title: post.title,
      id: url,
      link: url,
      description: post.excerpt,
      content: post.excerpt,
      author: [author],
      contributor: [author],
      date: new Date(post.date),
    });
  });

  // generating the xml and json for rss
  fs.mkdirSync("./public/rss", { recursive: true });
  fs.writeFileSync("./public/rss/feed.xml", feed.rss2());
  fs.writeFileSync("./public/rss/feed.json", feed.json1());
}
Enter fullscreen mode Exit fullscreen mode

Now, we just need to call this function to generate the feed as the data is updated. To do that we call this function inside the getStaticProps in pages/index.js because whenever our site is built and deployed, our RSS feed will be created and updated as well.

// pages/index.js

// first import that function
import generateRSS from "../lib/generateRssFeed";

export async function getStaticProps() {
  // ........
  await generateRSS(); // calling to generate the feed
  // ........
}
Enter fullscreen mode Exit fullscreen mode

I didn't want to push the RSS files to GitHub, because it is not necessary. That's why I put /public/rss in the .gitignore.

That's it everything is done. Now if you are in the development then you can go to the localhost:3000/rss/feed.xml and if you are in the production then you can just simply go to https://yoursite.com/rss/feed.xml. You will find the RSS in xml format. In case you want to get the json data just use https://yoursite.com/rss/feed.json.

Method-2

Install rss package

In the second method you need to install the rss package through npm or yarn

yarn add rss
# or
npm i rss
Enter fullscreen mode Exit fullscreen mode

Generating RSS

To generate an RSS feed, you need to create a function the same as we did in the previous method.

// lib/generateRSS.js

import { writeFileSync } from "fs";
import { getAllPosts } from "./posts";
import RSS from "rss";
export default async function getRSS() {
  const siteURL = "https://yourdomain.com";
  const allBlogs = getAllPosts();

  const feed = new RSS({
    title: "Your Name",
    description: "your description",
    site_url: siteURL,
    feed_url: `${siteURL}/feed.xml`,
    language: "en",
    pubDate: new Date(),
    copyright: `All rights reserved ${new Date().getFullYear()}, Your Name`,
  });

  allBlogs.map((post) => {
    feed.item({
      title: post.title,
      url: `${siteURL}/blogs/${post.slug}`,
      date: post.date,
      description: post.excerpt,
    });
  });

  writeFileSync("./public/feed.xml", feed.xml({ indent: true }));
}
Enter fullscreen mode Exit fullscreen mode

Call the function

As we did in the previous method we can call it inside the getStaticProps in pages/index.js

// pages/index.js

// first import that function
import generateRSS from "../lib/generateRssFeed";

export async function getStaticProps() {
  // ........
  await generateRSS(); // calling to generate the feed
  // ........
}
Enter fullscreen mode Exit fullscreen mode

After applying this method you just need to visit the /feed.xml and it'll give you the result. For example - https://youdomain.com/feex.xml

My RSS feed is live right now you can check it out.

Wrapping Up

If you enjoyed this article then don't forget to press ❤️ and Bookmark it for later use. If you have any queries or suggestions don't hesitate to drop them. See you.

You can extend your support by buying me a Coffee.😊👇
buymecoffee

My Newsletter

Image
What Can A Weekly Assessment In Mental Health Project Can Change Your Life
Image
Watch Out: How Accident Lawyer Tulsa Is Taking Over And What To Do About It
Image
5 Must-Know Hismphash Practices You Need To Know For 2023
Image
10 Things You've Learned In Kindergarden To Help You Get Accident Lawyer Boston
Image
Why No One Cares About Best Asbestos Lawyers
Image
StepWise: A Powerful C# Workflow Engine for Task Execution

dotnet, tooling, typescript
Image
What Is The Future Of Asbestos Related Death Compensation Be Like In 100 Years?
Image
10 Things You Learned In Preschool That'll Help You Understand Railroad Accident Lawyer
Image
Keuntungan Mendapati Bonus Referal Judi Online
Image
beberapa langkah deposit dalam website slots online
Image
A Complete Guide To Ghost Immobiliser Review Dos And Don'ts
Image
Why You Should Concentrate On Improving Landlord Gas Safety Certificate
Image
12 Stats About Asbestos Cancer Law Lawyer Mesothelioma Settlement To Make You Look Smart Around Other People
Image
Buzzwords De-Buzzed: 10 Alternative Ways To Say Personal Injury Claim Compensation
Image
Ten Easy Steps To Launch Your Own Traffic Accident Lawyer Near Me Business
Image
How Isuzu Truck Key Replacement Can Be Your Next Big Obsession
Image
kekeliruan pemula dalam permainan slots online
Image
Schilderwerk: Welke soorten schilderwerk zijn er en wat zijn de prijzen?
Image
Let's Get It Out Of The Way! 15 Things About Truck Keys We're Fed Up Of Hearing
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .