<p>I recently came across <a href="https://twitter.com/SaraSoueidan/status/1390598514774847496">a tweet from Sara Soueidan</a> 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:</p>
<ul>
<li>What the heck are they?</li>
<li>What are they for?</li>
<li>I thought people didn't use them anymore?</li>
</ul>
<p>If you also have questions like this, I recommend reading <a href="https://rss.com/blog/how-do-rss-feeds-work/">How Do RSS Feeds Work?</a> right from RSS.com. The first few words really sum it up:</p>
<blockquote>
<p>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!</p>
</blockquote>
<p>To better understand how RSS feeds are consumed, I created my own RSS reader app and I also <a href="https://ashleemboyer.com/create-your-own-nextjs-rss-reader-app">wrote about it</a> 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!</p>
<h2>How I Added an RSS Feed to my Next.js Site</h2>
<p>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 <code>&lt;description&gt;</code> nor <code>content</code> of each <code>&lt;item&gt;</code> in the channel can't have regular HTML in it. <a href="https://cyber.harvard.edu/rss/encodingDescriptions.html">The HTML tags must be encoded</a>. 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.</p>
<p>After struggling for hours and trying several different approaches, I <a href="https://twitter.com/AshleeMBoyer/status/1391568723581054978">went to Twitter for help</a>. There were a lot of helpful replies! I found exactly what I ended up using thanks to <a href="https://github.com/sweeneyapps/html2rssfeed">an example project</a> from <a href="https://twitter.com/vphreak/status/1391853784666501121">@vphreak</a>. So, what did it take?</p>
<p>First, I installed <a href="https://github.com/jpmonette/feed">the <code>feed</code> package</a>.</p>
<pre><code class="language-bash">yarn add feed
</code></pre>
<p>Then, I added a <code>generateRSSFeed</code> function.</p>
<pre><code class="language-js">const generateRSSFeed = (articles) =&gt; {
  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:
      &quot;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.&quot;,
    id: baseUrl,
    link: baseUrl,
    language: 'en',
    feedLinks: {
      rss2: `${baseUrl}/rss.xml`,
    },
    author,
  });

  // Add each article to the feed
  articles.forEach((post) =&gt; {
    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());
};
</code></pre>
<p>Finally, I updated the <code>getStaticProps</code> function exported from <code>src/pages/index.jsx</code> to call the new <code>generateRSSFeed</code> function.</p>
<pre><code class="language-js">export async function getStaticProps() {
  const articles = getAllArticles();
  articles.sort((a, b) =&gt; (a.meta.date &lt; b.meta.date ? 1 : -1)

  generateRSSFeed(articles);

  return { props: { articles } };
}
</code></pre>
<p>Because my site is set up to build only when my main git branch is updated, <code>getStaticProps</code> will be called at that time and so will <code>generateRSSFeed</code>. 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.</p>
<h2>Resources</h2>
<ul>
<li><a href="https://validator.w3.org/feed/docs/rss2.html">RSS 2.0 Specification</a></li>
<li><a href="https://github.com/jpmonette/feed#readme"><code>feed</code> GitHub repository</a></li>
<li><a href="https://www.w3schools.com/xml/xml_rss.asp">W3Schools XML RSS page</a></li>
</ul>


Learn how to add an RSS feed to your own Next.js site.

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

<p>I recently came across <a href="https://twitter.com/SaraSoueidan/status/1390598514774847496">a tweet from Sara Soueidan</a> 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:</p>
<ul>
<li>What the heck are they?</li>
<li>What are they for?</li>
<li>I thought people didn't use them anymore?</li>
</ul>
<p>If you also have questions like this, I recommend reading <a href="https://rss.com/blog/how-do-rss-feeds-work/">How Do RSS Feeds Work?</a> right from RSS.com. The first few words really sum it up:</p>
<blockquote>
<p>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!</p>
</blockquote>
<p>RSS feeds mean I can read all of my favorite blogs in one place?? And I don't <em>have</em> to subscribe to newsletters to know when a new post has been published?? That sounds so lovely! I knew then that I definitely needed to figure out how to provide an RSS feed for my own site.</p>
<p>In order to better understand how to create an RSS feed for my site, I needed to better understand how they are used. This is where I got the idea to create my own RSS reader app! Once I had the app finished, it also doubled as a way for me to test my RSS feed as I developed it.</p>
<p>I had a ton of fun with it so I decided to share my findings with y'all in case you also want to make your own RSS reader app. I hope you find the instructions below helpful and as always, let me know on Twitter if you have any questions!</p>
<h2>How to Create Your Own Next.js RSS Reader App</h2>
<h3>Fork and clone the repo</h3>
<p>First, you need to create a fork of the starter code.</p>
<ol>
<li>Go to <a href="https://github.com/ashleemboyer/nextjs-rss-reader-starter">the GitHub repository</a></li>
<li>Click the &quot;Fork&quot; button at the top right of the page</li>
<li>Follow the steps provided by GitHub</li>
</ol>
<p>Second, clone the fork you've created onto your machine and install the dependencies.</p>
<pre><code class="language-bash">git clone &lt;your fork&gt;    # Clones the fork
yarn                     # Installs the dependencies
</code></pre>
<h3>Set up Firebase Authentication</h3>
<p>Third, you need to create a Firebase project since it'll handle authentication. You want this app to have authentication so that other people aren't driving up your API requests that will be made to RSS to JSON (we'll set that up next).</p>
<ol>
<li>Go to <a href="https://console.firebase.google.com">console.firebase.google.com</a> and make sure you're logged in with the Google account you want to use.</li>
<li>Click the card that says &quot;Add project&quot;. It should be the first one listed.</li>
<li>Enter a project name. I'm going to use <code>nextjs-rss-reader</code>.</li>
<li>Toggle &quot;Enable Google Analytics for this project&quot; to off.</li>
<li>Click &quot;Create project&quot;.</li>
<li>Click &quot;Continue&quot; when your new project is ready.</li>
</ol>
<p>Here's a video showing these steps (the project name is different):</p>
&lt;iframe width=&quot;100%&quot; height=&quot;350&quot; src=&quot;https://www.youtube-nocookie.com/embed/2w5BV9ft82g&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;
<p>Firebase makes it easy for us to set up email/password authentication in our app. It's also easy to add a user for ourselves right from the console. Make sure you use a real email address and a secure password for your user. This is how you're protecting your feed!</p>
<ol>
<li>Go to <a href="console.firebase.google.com">the Firebase console</a> for your project.</li>
<li>Go to the &quot;Authentication&quot; page under &quot;Build&quot;.</li>
<li>Click &quot;Get Started&quot;.</li>
<li>You should be on the &quot;Sign-in method&quot; tab.</li>
<li>Click &quot;Email/Password&quot;.</li>
<li>Enable the first toggle.</li>
<li>Click &quot;Save&quot;.</li>
<li>Switch to the &quot;Users&quot; tab.</li>
<li>Click &quot;Add user&quot;.</li>
<li>Enter a secure email and password.</li>
<li>Click &quot;Add user&quot;.</li>
</ol>
<p>Here's a video showing these steps:</p>
&lt;iframe width=&quot;100%&quot; height=&quot;350&quot; src=&quot;https://www.youtube-nocookie.com/embed/WTnIU0ZtCoo&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;
<h3>Create an RSS to JSON account</h3>
<p>Next, let's set up an <a href="rss2json.com">RSS to JSON</a> account so we can get an API key for making API requests. I personally have a paid plan because of the number of feeds I subscribe to, but the free plan is pretty nice! At the time of this writing, the free plan updates a feed once an hour, allows 10,000 requests per day, and supports 25 feeds. The starter code is currently set up to generate your site no more than once per day, so at the very most, you'll be making 1 request per feed per day.</p>
<ol>
<li>Sign up for an RSS to JSON account at <a href="https://rss2json.com/sign-up">this link</a></li>
<li>Get your API key from <a href="https://rss2json.com/me/api_key">the My Account page</a> and have it ready for the next step.</li>
</ol>
<h3>Create a .env file</h3>
<p>In the root of your forked project, create a file called <code>.env</code>. It will have four items in it.</p>
<pre><code class="language-env">RSS_2_JSON_API_KEY=&lt;your RSS to JSON api key&gt;
NEXT_PUBLIC_FIREBASE_API_KEY=&lt;your Firebase project's API key&gt;
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=&lt;your Firebase project's auth domain&gt;
NEXT_PUBLIC_FIREBASE_PROJECT_ID=&lt;your Firebase project ID&gt;
</code></pre>
<p>Put your RSS to JSON API key from the previous step with the <code>RSS_2_JSON_API_KEY</code> item. You can get the other items from Firebase after registering your app. Here are the steps for that:</p>
<ol>
<li>Go to <a href="console.firebase.google.com">the Firebase console</a> for your project.</li>
<li>Go to the project settings.</li>
<li>Scroll to the bottom of the page where it says &quot;Your apps.&quot;</li>
<li>Click the &quot;&lt;/&gt;&quot; button to register your app for web.</li>
<li>For &quot;App nickname&quot;, enter <code>nextjs-rss-reader</code>.</li>
<li>Click the &quot;Register app&quot; button.</li>
<li>Copy and paste the <code>apiKey</code>, <code>authDomain</code>, and <code>projectId</code> values with the last three items in your <code>.env</code> file.</li>
</ol>
<h3>Start the app</h3>
<p>We're ready to go! Start the app with <code>yarn dev</code> and go to http://localhost:3000/ in your browser. You should be redirected to the login page where you can enter your email and password for the user you created in the second part of the Set up Firebase Authentication section above.</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F05%2Fcreate-your-own-nextjs-rss-reader-app%2Flogin-page.png?alt=media&amp;token=0ec4c0d0-6939-4858-a76d-31bd7d2f5010" alt="Browser window screenshot with a background of large, dark green leaves. The window shows a white webpage showing &quot;Log In&quot; text at the top. There is an input for email and password and a gray &quot;Sign In&quot; button." /></p>
<p>After logging in, you should see a list of articles. You can click the &quot;Read here&quot; links to read the article within your app, or you can click the &quot;Read at source&quot; link to read the original version of the article!</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2F2021%2F05%2Fcreate-your-own-nextjs-rss-reader-app%2Farticles-page.png?alt=media&amp;token=81e422b0-addc-47fe-ae3d-539477222d39" alt="Browser window screenshot with a background of large, dark green leaves. The window shows a white webpage with black text. The title is &quot;My RSS Reader&quot; and there is a vertical list of articles with thin black borders. Each article first shows the title in large bold text, then the name of the feed, author, and publish date on the next line, then a horizontal rule, and lastly the article's description as HTML." /></p>
<h3>Customize your feed</h3>
<p>The app knows what feeds to fetch by the <code>feed.txt</code> file in the root of the project. If you open the file, you'll see three listed with each one on its own line in the file:</p>
<pre><code class="language-txt">https://www.a11yproject.com/feed/feed.xml
https://webaim.org/blog/feed/
http://www.webaxe.org/feed/
</code></pre>
<p>If you want to remove a feed, just delete the line. If you want to add a feed, make sure it's on its own line. That's it! Happy reading. :)</p>


Learn how to build your own RSS Reader App with Firebase Authentication and the RSS to JSON API.

Posts Related to the "rss" Tag

She's written 2 posts

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

How to Create Your Own Next.js RSS Reader App