Creating an RSS feed with Next.js and Next-MDX

I recently decided to fully rebuild my blog from the ground up using Next.js. By default, there's no built-in support to auto-generate an RSS for blog posts like there are in so many starters for Gatsby. As such I needed to roll my own.

Ultimately, an RSS feed is just an XML file that gets updated with new entries as new posts are made. Lucklily, we can take advantage of the fact that committing a new blog post will trigger a new build of the site. Using that, we can update the build command in our package.json to run a node script before our actual build like this:

"scripts": {
	"build": "node ./buildFeed && next build",
},

Now we just need to update our buildFeed.js (which lives in our root directory) to create a new XML file when it's run. To do that I'm going to use 3 packages: fs, rss, and next-mdx.

const fs = require('fs')
const RSS = require('rss')
const { getAllNodes } = require('next-mdx');

First we need to create a new RSS feed.

const feed = new RSS({
	title: 'My Blog',
	site_url: 'https://my-blog.com'
});

Next we need to get the blog posts to load into this feed.

const posts = await getAllNodes('post');

Then we need to iterate over our posts and add them to our feed.

posts.forEach(post => {
	feed.item({
		title: post.frontMatter.title,
		guid: post.slug,
		url: 'https://my-blog.com/post/' + post.url,
		date: post.frontMatter.date
	});
});

Now we have our feed built out, we just need to generate the XML and write it out to a file.

const xml = feed.xml({ indent: true });

fx.writeFileSync('public/rss.xml', xml);

This will write our rss.xml file to the public folder of our Next.js app so that it will be at a publicly available URL at https://my-blog.com/rss.xml.

See the gist for the full code.