How to Add An RSS Feed to a NextJS Blog

This page summarizes the projects mentioned and recommended in the original post on dev.to
React ReactJS Web Frameworks PostCSS UI Frameworks

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured

  • Next.js

    The React Framework

    • In this article I want to share how I implemented syndication feeds in my NextJS-powered website.

  • emotion

    👩‍🎤 CSS-in-JS library designed for high performance style composition

    • My site uses Chakra UI for theming, which uses Emotion -- a CSS-in-JS library -- under the hood. Emotion will happily render tons of tags when statically generating HTML from your React components. For most use cases where you render React on the server (statically or not), this is desirable. In the case of RSS/Atom feeds, this is pretty useless.

    Solution

    The solution here is to strip all the </code> and <code><style></code> tags from the generated HTML. Rather than summoning <a href="https://stackoverflow.com/a/1732454/872397"><em>The One whose Name cannot be expressed in the Basic Multilingual Plane</em></a> by trying to use regex here, I found <a href="https://www.npmjs.com/package/string-strip-html">this library</a> to help me with this task:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code><span class="kd">const</span> <span class="nx">cleanHtmlContent</span> <span class="o">=</span> <span class="nx">stripHtml</span><span class="p">(</span><span class="nx">htmlContent</span><span class="p">,</span> <span class="p">{</span> <span class="na">onlyStripTags</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">script</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">style</span><span class="dl">'</span><span class="p">],</span> <span class="na">stripTogetherWithTheirContents</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">script</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">style</span><span class="dl">'</span><span class="p">],</span> <span class="p">}).</span><span class="nx">result</span><span class="p">;</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <h2> <a name="the-end-result" href="#the-end-result"> </a> The end result </h2> <p>I now have serve <a href="///feeds/feed.xml">RSS</a>, <a href="///feeds/atom.xml">Atom</a> and a <a href="///feeds/feed.json">JSON Feed</a> for your reading pleasure. Most of the relevant code <a href="https://github.com/DandyDev/daan.fyi/blob/main/lib/feeds.tsx">can be found here</a></p> <h2> <a name="future-plans" href="#future-plans"> </a> Future plans </h2> <p>At some point I want to diversify my writing output by not only writing about tech. And even within the topic of tech there are many sub-topics I could write about, not all of which are equally interesting to every reader (all 5 of them, including my mom 👩‍👦). I'm planning to introduce <a href="https://github.com/DandyDev/daan.fyi/issues/3">tags</a> to allow filtering content once I have enough of it.</p> <p>Once I have tags, I would like to start supporting dynamic feeds so readers can subscribe only to the stuff they actually want to read. I imagine building an endpoint like this:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>/feeds/by-tags.xml?tags=tag1,tag2 </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>I'm curious if others are doing this!</p>

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo

  • chakra-ui

    ⚡️ Simple, Modular & Accessible UI Components for your React Applications

    • My site uses Chakra UI for theming, which uses Emotion -- a CSS-in-JS library -- under the hood. Emotion will happily render tons of tags when statically generating HTML from your React components. For most use cases where you render React on the server (statically or not), this is desirable. In the case of RSS/Atom feeds, this is pretty useless.

    Solution

    The solution here is to strip all the </code> and <code><style></code> tags from the generated HTML. Rather than summoning <a href="https://stackoverflow.com/a/1732454/872397"><em>The One whose Name cannot be expressed in the Basic Multilingual Plane</em></a> by trying to use regex here, I found <a href="https://www.npmjs.com/package/string-strip-html">this library</a> to help me with this task:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code><span class="kd">const</span> <span class="nx">cleanHtmlContent</span> <span class="o">=</span> <span class="nx">stripHtml</span><span class="p">(</span><span class="nx">htmlContent</span><span class="p">,</span> <span class="p">{</span> <span class="na">onlyStripTags</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">script</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">style</span><span class="dl">'</span><span class="p">],</span> <span class="na">stripTogetherWithTheirContents</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">script</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">style</span><span class="dl">'</span><span class="p">],</span> <span class="p">}).</span><span class="nx">result</span><span class="p">;</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <h2> <a name="the-end-result" href="#the-end-result"> </a> The end result </h2> <p>I now have serve <a href="///feeds/feed.xml">RSS</a>, <a href="///feeds/atom.xml">Atom</a> and a <a href="///feeds/feed.json">JSON Feed</a> for your reading pleasure. Most of the relevant code <a href="https://github.com/DandyDev/daan.fyi/blob/main/lib/feeds.tsx">can be found here</a></p> <h2> <a name="future-plans" href="#future-plans"> </a> Future plans </h2> <p>At some point I want to diversify my writing output by not only writing about tech. And even within the topic of tech there are many sub-topics I could write about, not all of which are equally interesting to every reader (all 5 of them, including my mom 👩‍👦). I'm planning to introduce <a href="https://github.com/DandyDev/daan.fyi/issues/3">tags</a> to allow filtering content once I have enough of it.</p> <p>Once I have tags, I would like to start supporting dynamic feeds so readers can subscribe only to the stuff they actually want to read. I imagine building an endpoint like this:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>/feeds/by-tags.xml?tags=tag1,tag2 </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>I'm curious if others are doing this!</p>

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Next.Js + MUI v5 tutorial

    4 projects | dev.to | 20 Dec 2021

  • Serializing a style using your Chakra UI theme

    3 projects | dev.to | 7 Jun 2021

  • React Component Libraries

    13 projects | dev.to | 13 Mar 2024

  • New client-side hooks coming to React 19

    3 projects | dev.to | 23 Jan 2024

  • Beyond the Basics: Exploring TailwindCSS and Linaria in Next.js - From Installation to Performance Optimization

    4 projects | dev.to | 25 Dec 2023