Ashlee standing in front of a brick wall looking up to her left and smiling. Her right hand is held up near her right shoulder with the palm facing upwards.

Ashlee M Boyer

You can find me talking about issues surrounding Disability, Accessibility, & Mental Health on Twitter, or you can find me regularly live-knitting or live-coding on Twitch. I'm @AshleeMBoyer on all the platforms I use.

How I Added an RSS Feed to My Next.js Site

Thursday, May 27, 20214 minute read

#rss#react#nextjs#web-development

I recently came across a tweet from Sara Soueidan applauding folks who provide an RSS feed on their site. Sara is someone I highly admire in frontend web development and accessibility, but I had so little knowledge of RSS feeds and so many questions:

  • What the heck are they?
  • What are they for?
  • I thought people didn't use them anymore?

If you also have questions like this, I recommend reading How Do RSS Feeds Work? right from RSS.com. The first few words really sum it up:

Imagine being able to log into one dashboard and getting the latest news and events from all of your favorite websites, blogs, or podcasts? With RSS feeds, it’s possible!

To better understand how RSS feeds are consumed, I created my own RSS reader app and I also wrote about it so you can create one too if you like. The app I created also served as a great way for me to test my RSS feed as I built it!

How I Added an RSS Feed to my Next.js Site

There were two main problems I ran into while trying to build an RSS feed for my articles. Firstly, I didn't know that neither the <description> nor content of each <item> in the channel can't have regular HTML in it. The HTML tags must be encoded. Secondly, I found out it's really difficult to try to parse the HTML content in a Node.js environment on my own before putting it into the feed.

After struggling for hours and trying several different approaches, I went to Twitter for help. There were a lot of helpful replies! I found exactly what I ended up using thanks to an example project from @vphreak. So, what did it take?

First, I installed the feed package.

bash
1
yarn add feed

Then, I added a generateRSSFeed function.

js
12345678910111213141516171819202122232425262728293031323334353637383940414243444546
const generateRSSFeed = (articles) => {  const baseUrl = 'https://ashleemboyer.com';  const author = {    name: 'Ashlee Boyer',    email: 'hello@ashleemboyer.com',    link: 'https://twitter.com/ashleemboyer',  };   // Construct a new Feed object  const feed = new Feed({    title: 'Articles by Ashlee M Boyer',    description:      "You can find me talking about issues surrounding Disability, Accessibility, and Mental Health on Twitter, or you can find me regularly live-knitting or live-coding on Twitch. I'm @AshleeMBoyer on all the platforms I use.",    id: baseUrl,    link: baseUrl,    language: 'en',    feedLinks: {      rss2: `${baseUrl}/rss.xml`,    },    author,  });   // Add each article to the feed  articles.forEach((post) => {    const {      content,      fileName,      meta: { date, description, title },    } = post;    const url = `${baseUrl}/${fileName}`;     feed.addItem({      title,      id: url,      link: url,      description,      content,      author: [author],      date: new Date(date),    });  });   // Write the RSS output to a public file, making it  // accessible at ashleemboyer.com/rss.xml  fs.writeFileSync('public/rss.xml', feed.rss2());};

Finally, I updated the getStaticProps function exported from src/pages/index.jsx to call the new generateRSSFeed function.

js
12345678
export async function getStaticProps() {  const articles = getAllArticles();  articles.sort((a, b) => (a.meta.date < b.meta.date ? 1 : -1)   generateRSSFeed(articles);   return { props: { articles } };}

Because my site is set up to build only when my main git branch is updated, getStaticProps will be called at that time and so will generateRSSFeed. This means the feed is always up to date when I push a new Markdown file for each post or whenever existing files are updated.

Resources