Having RSS feed helps us to stay up-to-date with the latest content from our favorite websites. In this blog post, I will quickly show you how to create your own.
What is RSS feed?
RSS stands for Really Simple Syndication. It is an XML file that contains all the information about your website. Mostly of the readers like to use RSS readers like Feeder to easily stay informed about your latest posts.
Installing the necessary npm package
To generate an rss feed i used this npm package. To install it, just run.
npm i rss
Create a function to generate RSS feed
I have all my posts stored locally on _posts
directory and manage it using contentlayer.
Extracting data from .mdx files
Since I use the .mdx
file format on my posts, I must use the built-in Nodejs utilities to extract the data.
const { promises: fs } = require("fs");
const { join } = require("path");
const postDirectory = join(process.cwd(), "_posts");
async function getPostSlugs() {
return await fs.readdir(postDirectory);
}
In this snippet, where creating an asynchronous function fetch all our post slugs.
Generating the RSS feed
Now, we just have to map through post slugs and read those file contents.
const matter = require("gray-matter");
async function generate() {
const feed = new RSS({
title: "Al Joseph Condino",
site_url: "https://aljoseph.co",
feed_url: "https://aljoseph.co/feed.xml",
});
const slugs = await getPostSlugs();
await Promise.all(
slugs.map(async (slug) => {
const fullPath = join(postDirectory, slug);
const fileContents = await fs.readFile(fullPath, "utf8");
const { data, content } = matter(fileContents);
feed.item({
title: data.title,
url: "https://aljoseph.co/posts/" + slug.replace(/\.mdx?/, ""),
date: data.date,
description: data.excerpt,
});
})
);
return await fs.writeFile("./public/feed.xml", feed.xml({ indent: true }));
}
generate();
We parse those front matters from our file contents to get each of those metadata on our posts. Then, we save the generated feed on our public assets ./public/feed.xml
.
Here's the final code snippet.
const { promises: fs } = require("fs");
const { join } = require("path");
const RSS = require("rss");
const matter = require("gray-matter");
const postDirectory = join(process.cwd(), "_posts");
async function getPostSlugs() {
return await fs.readdir(postDirectory);
}
async function generate() {
const feed = new RSS({
title: "Al Joseph Condino",
site_url: "https://aljoseph.co",
feed_url: "https://aljoseph.co/feed.xml",
});
const slugs = await getPostSlugs();
await Promise.all(
slugs.map(async (slug) => {
const fullPath = join(postDirectory, slug);
const fileContents = await fs.readFile(fullPath, "utf8");
const { data, content } = matter(fileContents);
feed.item({
title: data.title,
url: "https://aljoseph.co/posts/" + slug.replace(/\.mdx?/, ""),
date: data.date,
description: data.excerpt,
});
})
);
return await fs.writeFile("./public/feed.xml", feed.xml({ indent: true }));
}
generate();
Configuring Webpack
Make sure to only run the generator on the server-side. So on your next.config.js
add a custom webpack configuration.
const { withContentlayer } = require('next-contentlayer')
module.exports = withContentlayer({
pageExtensions: ['tsx', 'md', 'mdx'],
webpack: (config, { isServer }) => {
if (isServer) {
require('./scripts/rss');
}
return config;
},
experimental: {
appDir: true
}
})
The isServer
property is for server-side compilation. That means we will only trigger the rss generator on the server-side.
Lastly make sure to add feed.xml
on your .gitignore
.
Conclusion
By following this simple tutorial, we have walk through to the importance of having RSS feed and step by step process of creating it on your Nextjs app.
You have now enabled your readers to keep up with your latest posts. Happy blogging!