While RSS feeds are definitely on the decline, it might be a significant amount of your readers that prefers to use an RSS reader, so you want to implement it on your site. Or you’re a curious developer and you find pleasure making your blog more technically complete (like me!). With Next.js plus one dependency to produce the XML, today it’s so easy to produce an RSS feed. Let me show you.
Using Next.js to produce the feed
With Next.js, we have a couple of options:
Postbuild: producing the feed after building and placing the file in
Server-side Rendering: Creating a page
/pages/rss.xml.tsxthat dynamically produces the feed and returns it
Static Generation: Creating a page
/pages/rss.xml.tsxthat produces the feed and returns it
Postbuild generation might be enough
If your website URLs and content can only change with deployments, creating the feed on a
postbuild script might be enough.
There’s a conveniently named package: next-rss. It should work out of the box, just placing a
next-rss.js config file in the project’s root directory. However, I don’t recommend using it as it has issues and it seems unmaintained.
I made a fork package, fixing the issue and extending the ability to customize feed items: https://www.npmjs.com/package/@guillermodlpa/next-rss
But unless this is exactly what you’re looking for, I still don’t recommend this approach just because of how easy it is to do it yourself in a server-side rendered page.
Generating the RSS feed with Server-side Rendering
Check out a live example here: https://guillermodlpa.com/rss.xml
Create a new page in your Next.js project:
Make the page component export nothing, like this:
getServerSideProps, fetch all the blog posts for your feed.
Cache-Controlheader with a
s-maxagevalue so that the answer is cached in the Vercel network (or your custom cache if not using Vercel).
Set the content type of the response to XML:
End the response and return an empty props object:
Here’s the implementation of the RSS feed for this blog:
Generating the RSS feed with Static Generation
With just a few tweaks to the implementation above, you can change it to be statically generated. However, remember that you’d need to write some code to revalidate the page on-demand when there are changes on the blog posts! That can be inconvenient if you just have it to implement it for RSS feed, but if you’re doing it already for the blog list page and the sitemap, then you might as well use SG and on-demand revalidation here too.