DEV Community


Posted on • Originally published at

NextJS Add RSS Feed to Blog

Every blog can benefit from adding an RSS feed, it allows users to subscribe to your blog and get updates when you publish new content. In this post, we'll add an RSS feed to our NextJS blog.

What is an RSS Feed?

RSS stands for Really Simple Syndication, it's a way to publish frequently updated content such as blog posts, news, and podcasts. Users can subscribe to an RSS feed and get updates when new content is published.

Add RSS Feed to NextJS Blog

Out of the box there isn't a way of creating an RSS feed in NextJS, we'll need to use a package called rss to create the RSS feed.

First, we need to install the rss package:

npm install rss
Enter fullscreen mode Exit fullscreen mode

The way this is going to work is for us to create a route on the site, which will then fetch all post information and generate the RSS feed.

Inside your app directory create a folder of feed inside here create a file called route.tsx

import RSS from "rss";
import { SITE_FEED, SITE_NAME, SITE_URL } from "@/lib/constants";
import { getPosts } from "@/lib/blog/api";

export async function GET() {
  const posts = getPosts();

  const feedOptions = {
    title: SITE_NAME,
    site_url: SITE_URL,
    feed_url: SITE_FEED,
    pubDate: new Date(),
  const feed = new RSS(feedOptions);

  posts.forEach((post) => {
      title: post.title,
      url: `${SITE_URL}/${post.slug}`,
      date: post.createdAt,
      description: post?.description,

  return new Response(feed.xml({ indent: true }), {
    headers: {
      "Content-Type": "application/xml; charset=utf-8",
Enter fullscreen mode Exit fullscreen mode

This will use the rss package to create an RSS feed of all the posts on the site, then it will return this as an XML response.

Next, we need to add this route to the app router, open app/router.tsx and add the following:

You can test this is working by going to http://localhost:3000/feed and you should see the RSS feed.

Add RSS Link to Site

With the RSS feed created we need a way for the RSS feed to be found.

On the global layout file app/layout.tsx add the following inside the head tag:

  title="RSS Feed for Site"
Enter fullscreen mode Exit fullscreen mode

Further Reading allow you to sync your RSS feed with your account, this is a great way to get more exposure for your blog. Everytime you make a post on your blog it will create a draft post on automatically. Sync your RSS feed with

Top comments (1)

jenesh profile image
Jenesh Napit

Straight to the point, nice job!