RSS feeds are to me the original way to surf the web. Lately I've been feeling that the mainstream internet (social media such as Instagram, Tiktok, X , etc) is losing its spark. Some people adhere to the "dead internet theory", which might be part of the issue. What I do think is that back in the day, people used to connect and share more genuine stuff on the internet, and one of the most efficient ways is using an RSS feed. Here's how to do it using Next.js

Before we get to it, don't forget to subscribe to mine! 😁

What we'll do:

Get blog entries data.
Create a util function that writes XML and JSON files to our server file system (effectively creating the RSS feed).
Call the function at build time and making it run with a Vercel cron job.

First of all, install the following dependency into your project

npm install feed

Create a util function

First, I created a JavaScript file. This is where the whole logic to create the RSS feed resides.

/src/utils/generateRSSfeed.js

import { Feed } from "feed"

const generateRssFeed = async () => {
    //Code to generate the RSS feed
}

export default generateRssFeed();

Get blog entries data

Using the JavaScript fetch API:

/src/utils/generateRSSfeed.js

    const postsFetch = await fetch(`https://nicohorn.com/api/blog_entry`, {
        method: "GET",
    });

Let's define some useful variables

/src/utils/generateRSSfeed.js    

    const postsFetch = await fetch(`https://nicohorn.com/api/blog_entry`, {
        method: "GET",
    });
    const posts = await postsFetch.json();
    const siteURL = "https://nicohorn.com";
    const date = new Date();
    const author = {
        name: "Nico Horn",
        email: "contact@nicohorn.com",
        link: "https://nicohorn.com"
    }

Now, using the Feed library, we do the following:

/src/utils/generateRSSfeed.js

    const feed = new Feed({
        title: "Nico Horn's blog",
        description: "Welcome to my blog! Here I post my own thoughts and views about tech, 
        philosophy and pretty much anything that comes to my mind.",
        id: siteURL,
        link: siteURL,
        image: `https://nicohorn.com/ms-icon-144x144.png`,
        copyright: `All rights reserved ${date.getFullYear()}, Nico Horn`,
        updated: date,
        generator: "Feed for Node.js",
        feedLinks: {
            rss2: `${siteURL}/rss/feed.xml`,
            json: `${siteURL}/rss/feed.json`,
            atom: `${siteURL}/rss/atom.xml`
        },
        author
    })

Add each entry to the feed we just created:

/src/utils/generateRSSfeed.js

    posts?.forEach((post) => {
        const entryURL = `${siteURL}/en-US/blog/${post.id}`

        feed.addItem({
            title: post.title,
            id: entryURL,
            link: entryURL,
            description: post.description,
            content: post.content,
            image: post.cover_image,
            author: [author],
            contributor: [author],
            date: new Date(post.created_at),
        })
    })

Lastly, use the fs Node module to create a folder and write the files in the server:

/src/utils/generateRSSfeed.js
    
    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());

Final code:

/src/utils/generateRSSfeed.js

import { Feed } from "feed"
import fs from "fs";

const generateRssFeed = async () => {

    //This console log will appear in the console at build time.
    console.log("Creating RSS feed");
    const postsFetch = await fetch(`https://nicohorn.com/api/blog_entry`, {
        method: "GET",
    });
    const posts = await postsFetch.json();
    const siteURL = "https://nicohorn.com";
    const date = new Date();
    const author = {
        name: "Nico Horn",
        email: "contact@nicohorn.com",
        link: "https://nicohorn.com"
    }

    const feed = new Feed({
        title: "Nico Horn's blog",
        description: "Welcome to my blog! Here I post my own thoughts and views about tech, philosophy and pretty much anything that comes to my mind.",
        id: siteURL,
        link: siteURL,
        image: `https://nicohorn.com/ms-icon-144x144.png`,
        copyright: `All rights reserved ${date.getFullYear()}, Nico Horn`,
        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 entryURL = `${siteURL}/en-US/blog/${post.id}`

        feed.addItem({
            title: post.title,
            id: entryURL,
            link: entryURL,
            description: post.description,
            content: post.content,
            image: post.cover_image,
            author: [author],
            contributor: [author],
            date: new Date(post.created_at),
        })
    })

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

}

//This one I use it on the endpoint that the cron job runs.
export { generateRssFeed }
//It's exported like this, executed, because it'll be caled directly by a Node command in the CLI.
export default generateRssFeed();

Call the function at build time

Simply add the following command in the package.json

node ./src/utils/generateRSSfeed.js

/package.json 

  "scripts": {
    "dev": "next dev",
    "build": "node ./src/utils/generateRSSfeed.js && next build",
    "start": "next start",
    "lint": "next lint"
  },

Also, don't forget to add "type": "module" at the root level in the package.json.

That should be it. I ran into a few problems such as having to rename the postcss.config.js to postcss.config.cjs given that it's a CommonJS module.

Cron job

Now, what I did so far only works at build time, which is not all that useful if we want to keep our feed updated automatically. To solve this, I'm using a cron job that Vercel let us configure directly into the project. We could also call the function that creates the RSS feed in the POST endpoint that I use to create the blog post, but I had never used cron jobs in Vercel so I thought it would be a cool opportunity to try it out.

Learn more about cron jobs in Vercel: Cron Jobs (vercel.com )

Create a route.ts into the api folder in the project. The structure should look like this:

-/api
-/cron
-route.ts

/api/cron/route.ts

import { generateRssFeed } from '@/utils/generateEnglishRSSfeed';
import type { NextRequest } from 'next/server';

export function GET(request: NextRequest) {
    const authHeader = request.headers.get('authorization');
    if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
        return new Response('Unauthorized', {
            status: 401,
        });
    }

    generateRssFeed();

    return Response.json({ success: true });
}

And now, create a vercel.json file at the root level of your project to configure the cron job. In this case, this cron job runs everyday at 1:00AM.

To learn more about cron jobs: Cron Jobs: The Complete Guide for 2024 (cronitor.io )

{
  "crons": [
    {
      "path": "/api/cron",
      "schedule": "0 1 * * *"
    }
  ]
}

That's all, enjoy!

Nico Horn

Nico Horn

Create an RSS feed from a Next.js website