Add RSS to your Next.js blog

3 January, 2023

Prerequisites

  • A Next.js blog. If you don't have one, you can follow the official Next.js tutorial to create one.
  • Node.js and npm installed on your machine.

Step 1: Install the feed package

In your Next.js project, run the following command to install the feed package:

npm install feed

This will add the feed package as a dependency to your project.

Step 2: Create a function to generate the RSS feed

Next, create a file called rss.js in the root of your project and add the following code:

const { Feed } = require('feed');

const createRSSFeed = (posts) => {
  const feed = new Feed({
    title: 'My Next.js Blog',
    description: 'A blog powered by Next.js',
    id: 'https://my-nextjs-blog.com',
    link: 'https://my-nextjs-blog.com/rss.xml',
    language: 'en',
    image: 'https://my-nextjs-blog.com/static/logo.png',
    favicon: 'https://my-nextjs-blog.com/static/favicon.ico',
    copyright: 'All rights reserved 2020, John Doe',
    updated: new Date(),
    author: {
      name: 'John Doe',
      email: 'john@doe.com',
      link: 'https://my-nextjs-blog.com/about',
    },
  });

  posts.forEach((post) => {
    feed.addItem({
      title: post.title,
      id: `https://my-nextjs-blog.com/posts/${post.slug}`,
      link: `https://my-nextjs-blog.com/posts/${post.slug}`,
      description: post.description,
      content: post.content,
      author: [
        {
          name: 'John Doe',
          email: 'john@doe.com',
          link: 'https://my-nextjs-blog.com/about',
        },
      ],
      date: new Date(post.date),
    });
  });

  return feed.rss2();
};

module.exports = createRSSFeed;

This function takes an array of post objects as an argument and returns an RSS feed as a string. The Feed constructor from the feed package is used to create a new feed object, and the addItem method is used to add posts to the feed. The rss2 method is used to convert the feed to an RSS 2.0 format.

Step 3: Create a route for the RSS feed

In your Next.js project, create a pages directory if it doesn't exist already, and add a file called rss.js inside it with the following code:

import { getPosts } from '../lib/posts';
import createRSSFeed from '../rss';

const RSS = (props) => {
  const rss = createRSSFeed(props.posts);
  return {
    headers: {
      'Content-Type': 'application/rss+xml; charset=utf-8',
    },
    body: rss,
  };
};

RSS.getInitialProps = async () => {
  const posts = await getPosts();
  return { posts };
};

export default RSS;

This creates a Next.js page that returns the RSS feed as the response body when the /rss.xml route is accessed. The getInitialProps function is an async function that is called by Next.js to retrieve the initial data for the page. In this case, it fetches the posts from the getPosts function and passes them as props to the page component.

Step 4: Test the RSS feed

To test the RSS feed, start the Next.js development server by running the following command in your terminal:

npm run dev

Then, visit http://localhost:3000/rss.xml in your browser. You should see the RSS feed displayed in the browser. If you see any errors, make sure to debug and fix them before proceeding to the next step.

Step 5: Deploy the RSS feed

Finally, when you are ready to deploy your Next.js blog, make sure to include the rss.js file in the pages directory in your build. This will ensure that the RSS feed is available on your live blog at the /rss.xml route.

That's it! You have successfully added an RSS feed to your Next.js blog using the feed npm package. You can now share the RSS feed with your readers so that they can subscribe to your blog and stay updated with your latest posts.

I hope this tutorial was helpful. Let me know if you have any questions or need further assistance.

Loading...