A couple of weeks ago I struggled with figuring out how to add an RSS feed to my Next.js site, so I thought I'd write up a short guide on how I achieved it.

Working with Next.js

Next.js pages are made to output HTML markup and Javascript. You can use workarounds to output other types of files, yes, but there's actually a much simpler way to achieve this.

The easy solution to outputting an RSS feed with Next.js

Next.js comes with a very easy way to output any type of text based document without fiddling at all with the basic functionality: The API directory.

The API directory is usually used to output JSON to create simple server-side APIs in JSON. Here, we'll use it to create a dynamic RSS feed.

How our RSS Feed works

This is actually incredibly simple. Here's a quick breakdown. Let's make a folder located at /pages/api/feed and within it, we'll create an index.js file.

Note: If you want to have a dynamic endpoint you can just name your file [category].js. Then you'll be able to use the category variable in your script.

This is roughly how my index.js looks.

// /pages/api/feed/index.js
export default async function feedFunc(req, res) {
  let feed = "";
  try {
    feed = `<feed xmlns="http://www.w3.org/2005/Atom" xmlns:thr="http://purl.org/syndication/thread/1.0" xml:lang="en-GB" xml:base="https://example.com/api/feed/">
              <title type="text">My site</title>
              <subtitle type="text">A quick description of your site.</subtitle>
              <updated>2020-05-16T11:21:22Z</updated>
              <link rel="alternate" type="text/html" href="https://example.com/"/>
              <id>https://example.com/api/feed/</id>
              <link rel="self" type="application/atom+xml" href="https://example.com/api/feed/"/>
              <generator uri="https://ironeko.com version="1.0.0">Ironeko</generator>
            </feed>`;

    res.statusCode = 200;
    res.setHeader("Content-Type", "text/xml; charset=utf-8");
    res.end(feed);
  } catch (e) {
    console.log(e);
    res.statusCode = 500;
    res.end();
  }
}

Simple right? Here's why we don't really need anything else:

• Next.js' API allows us to set a response Header. This means we can easily output XML by simply adding res.setHeader("Content-Type", "text/xml; charset=utf-8");.
• We then just need to send a response code 200 and send our content with it res.end(feed).

Extending the example

Of course the above example isn't really a useful RSS feed, but it's such a simple example that it really doesn't take much to extend it!

For example, to add dynamic content you just need to fetch data with a package like [axios](https://www.npmjs.com/package/axios), then add that data as text to your feed variable, which will then be outputted as XML.

What does an RSS Feed look like?

The biggest challenge while building this is that I... Well, I don't actually know how to build an RSS feed from scratch. I can output XML, sure, but I don't know what XML a valid RSS feed needs.

Turns out this isn't very hard to solve as there are hundreds of valid RSS feeds available online and all you need to do is copy how they're structured.

For example, if you have a blog you can use Ironeko's RSS Feed as a base for yours. Ironeko's RSS feed was based 1:1 on Wordpress' RSS syntax and tested with Google News so you can rest assured that it'll work right out of the box!