RSS Feed in a Next.js site
RSS feeds are a great way for people to notify their readers that they've published new content! Instead of having to actively go and visit the websites to check if there are any new posts, the RSS alerts you when a website has been updated.
Here's how we can add a RSS feed to a Next.js site:
- Install the
Feed
package - Get all our posts' data
- Create our RSS feed
- Call our function inside of
getStaticProps
As I'll mention later, these above steps are what I used for my particular so your blog might require a slightly implementation, though the overall process remains the same!
Install packages
JS1yarn add feed23# if you're using npm4npm i feed
Get posts' data
This step will vary depending on how/where you're storing your content — you may be using MDX like I am, or a CMS like Sanity.
In my case, I manage most of my content using MDX, each with a meta
variable with metadata about the post.
JS1export const getBlogPostsData = async () => {2 // path where the MDX files are3 const DIR = path.join(process.cwd(), "src", "content", "blog");4 const files = fs5 .readdirSync(DIR)6 .filter((file) => file.endsWith(".mdx"));78 const META = /export\s+const\s+meta\s+=\s+(\{(\n|.)*?\n\})/;9 const postsData = files.map((file) => {10 // grab the metadata11 const name = path.join(DIR, file);12 const contents = fs.readFileSync(name, "utf8");13 const match = META.exec(contents);14 if (!match || typeof match[1] !== "string")15 throw new Error(`${name} needs to export const meta = {}`);16 const meta = eval("(" + match[1] + ")");1718 // remove the ".mdx" from the filename19 const slug = file.replace(/\.mdx?$/, "");2021 return {22 ...meta,23 slug,24 };25 });2627 return postsData;28};
Again, you will need to modify this particular method as per your own preference, so please keep that in mind!
Create an RSS feed
Thanks to the Feed
package, this part is greatly simplified; you can check out the docs, and here's what your function to create your RSS feed will look like:
JS1import { Feed } from "feed";2import { getBlogPostsData } from "@/utils/blog";34const generateRssFeed = async () => {5 const posts = await getBlogPostsData();6 const siteURL = process.env.SITE_URL;7 const date = new Date();8 const author = {9 name: "Sreetam Das",10 email: "sreetam@sreetamdas.com",11 link: "https://twitter.com/_SreetamDas",12 };1314 const feed = new Feed({15 title: "Sreetam Das' blog",16 description: "",17 id: siteURL,18 link: siteURL,19 image: `${siteURL}/logo.svg`,20 favicon: `${siteURL}/favicon.png`,21 copyright: `All rights reserved ${date.getFullYear()}, Sreetam Das`,22 updated: date,23 generator: "Feed for Node.js",24 feedLinks: {25 rss2: `${siteURL}/rss/feed.xml`,26 json: `${siteURL}/rss/feed.json`,27 atom: `${siteURL}/rss/atom.xml`,28 },29 author,30 });3132 posts.forEach((post) => {33 const url = `${siteURL}/blog/${post.slug}`;3435 feed.addItem({36 title: post.title,37 id: url,38 link: url,39 description: post.summary,40 content: post.summary,41 author: [author],42 contributor: [author],43 date: new Date(post.publishedAt),44 });45 });46};
and finally, we write the feed out to our filesystem
JS1import fs from "fs";2import { Feed } from "feed";3import { getBlogPostsData } from "@/utils/blog";45const generateRssFeed = async () => {6 const posts = await getBlogPostsData();7 const siteURL = process.env.SITE_URL;8 const date = new Date();9 const author = {10 name: "Sreetam Das",11 email: "sreetam@sreetamdas.com",12 link: "https://twitter.com/_SreetamDas",13 };1415 const feed = new Feed({16 title: "Sreetam Das' blog",17 description: "",18 id: siteURL,19 link: siteURL,20 image: `${siteURL}/logo.svg`,21 favicon: `${siteURL}/favicon.png`,22 copyright: `All rights reserved ${date.getFullYear()}, Sreetam Das`,23 updated: date,24 generator: "Feed for Node.js",25 feedLinks: {26 rss2: `${siteURL}/rss/feed.xml`,27 json: `${siteURL}/rss/feed.json`,28 atom: `${siteURL}/rss/atom.xml`,29 },30 author,31 });3233 posts.forEach((post) => {34 const url = `${siteURL}/blog/${post.slug}`;3536 feed.addItem({37 title: post.title,38 id: url,39 link: url,40 description: post.summary,41 content: post.summary,42 author: [author],43 contributor: [author],44 date: new Date(post.publishedAt),45 });46 });4748 fs.mkdirSync("./public/rss", { recursive: true });49 fs.writeFileSync("./public/rss/feed.xml", feed.rss2());50 fs.writeFileSync("./public/rss/atom.xml", feed.atom1());51 fs.writeFileSync("./public/rss/feed.json", feed.json1());52};
Run our function inside getStaticProps
Sweet! now that we have everything ready, we just need to make sure that our function is run at build time — so you can call it in the getStaticProps
function of one of your pages, like index.jsx
:
JSX1export const getStaticProps = async (_context) => {2 await generateRssFeed();34 return {5 // ...6 };7};
and that's it! whenever our site is built and deployed, our RSS feed will be created and updated as well. You can check out the result live!
Last updated: April 16, 2022
Getting view count
Sign up for my newsletter!
May include mechanical keyboards.
No spam, unsubscribe anytime :)
You can also view previous issues, and subscribe via RSS!