How to add RSS feed to your Markdown based NextJS blog.

As you guys know from my last blog post, I rewrote the website you’re currently in and at last blogpost I talked about RSS is not being available.

Problem with RSS

The problem with my RSS feed was parsing the Markdown. On the post page I’ve used a library named markdown-to-jsx and tailwind-typography to make it readable. But for feed I needed a different thing becouse the content on the RSS feed needed to be pure HTML as possible and that library wasn’t for that.

I needed a library that parses markdown as a string and outputs HTML as a string so that I could use it with my RSS generator. At the time of writing my website I didn't had enough time to search for it. But after searching trough npmjs, I found 3 libraries that does exactly what I needed.

After trying all of them, decided to use Showdown becouse it was the fastest and the simplest one.

// Converter.js

import Showdown from "showdown";

var converter = new Showdown.Converter();

export const mtoh = ({ content }) => {
    const text = content;
    const html = converter.makeHtml(text);
    
    return html;
}

Here is the code I needed to convert my Markdown content to html and it worked great and I went to my blog to fix this problem.

Fixing the problem

To fix this problem I needed to address the problem with the feed.xml file. What I mean by that is, I was generating the feed and writing it down to feed.xml file inside public while building the site and for a static site this is actually a great solution but my site was a SSR (Server Side rendered) site and I decided to use the NextJS 13's API router.

You can read more about Route Handler from NextJS documentation.

I went to app/ directory and generated a folder named feed.xml/ and under this folder created a file named route.js. This file will responsible for generating the feed and sending the XML data whenever something makes a request. In much simpler terms: It generates feed and sends it when someone makes a request.

Here is how I done it

// feed.xml/route.js

import { Feed } from "feed";
import { mtoh } from "@/libs/Converter";
import { getPostMetadata } from "@/libs/getPostMetadata";

export async function GET() {

    const metadata = {
        title: "THe Batuhan's Blog",
        author: "Batuhan Y. Yilmaz",
        description: "THe Batuhan's Blog RSS.",
        url: "www.thebatuhansnetwork.xyz",
    };

    const postMetadataReversed = getPostMetadata();
    const postMetadata = postMetadataReversed.slice(-10).reverse();
    const posts = postMetadata;

    const feed = new Feed({
        title: metadata.title,
        description: metadata.description,
        link: metadata.url,
        favicon: `${metadata.url}/logo.png`,
        image: `${metadata.url}/logo.png`,
        copyright: `GPLv3 ${new Date().getFullYear()}`,
        updated: new Date(),
        generator: `Manually typed by Batuhan Y. Yilmaz`,
        feedLinks: {
            rss2: `${metadata.url}/feed.xml`
        },
    });

    posts.map((post) => {
        const url = `${metadata.url}/blog/${post.slug}`;

        feed.addItem({
            title: post.title,
            id: url,
            link: url,
            content: mtoh({ content: post.content }),
            author: post.author,
        });
    });

    return new Response(feed.rss2());

}

In there I used a library named Feed to create my RSS feed.

const feed = new Feed({
        title: metadata.title,
        description: metadata.description,
        link: metadata.url,
        favicon: `${metadata.url}/logo.png`,
        image: `${metadata.url}/logo.png`,
        copyright: `GPLv3 ${new Date().getFullYear()}`,
        updated: new Date(),
        generator: `Manually typed by Batuhan Y. Yilmaz`,
        feedLinks: {
            rss2: `${metadata.url}/feed.xml`
        },
    });

For some reason my getPostMetadata function was getting my post data in a reversed order and to fix this I needed to slice it up to last 10 posts and reverse it. With that I just used .map function on post metadata and add them to my feed.

const postMetadataReversed = getPostMetadata();
const postMetadata = postMetadataReversed.slice(-10).reverse();
const posts = postMetadata;

posts.map((post) => {
    const url = `${metadata.url}/blog/${post.slug}`;

    feed.addItem({
        title: post.title,
        id: url,
        link: url,
        content: mtoh({ content: post.content }),
        author: post.author,
        });
    });

And lastly returning the Response as feed.rss2 and we're done. It's really that simple to create RSS feeds using NextJS API routes. When you navigate to /feed.xml from your browser it should look like this ![[Screenshot 2023-09-03 at 22.22.31.png]] Hopefully this post helps. I tried to explain detailed as much as possible. I've been busy with other stuff like getting into a college and working on some other projects which I'll reveal soon and becouse of that I'm not so much active on my blog and other social accounts but hopefully I'll try to be much active as possible.

Until next time!

Reply via E-Mail

Thank You!

Batuhan Yılmaz - 04.09.2023 - 29/100