
### What is an RSS feed?

[RSS](https://en.wikipedia.org/wiki/RSS) (RDF Site Summary or Really Simple Syndication) feed is an XML file used for providing users with frequently updated content in a standardized, computer-readable data format.

### Why do you need an RSS feed?

Millions of users every day enjoy reading from several websites through a *feed reader*, such as [Feedly](https://feedly.com/). You need to provide an RSS feed for your blog not to give up a potentially large share of audience.

Furthermore you can use your RSS feed to cross-post to other websites, such as the popular [dev.to](https://dev.to/) (see [here](#cross-posting-from-blog-to-devto)).

### The Kessel Run in less than twelve parsecs

Create a file `rss.js` in `lib` folder, or another directory of your preference other than `pages`, which as you probably know is a special directory reserved to routable content.

The new file would look like this (source [here](https://gist.github.com/riccardobevilacqua/d3820b80718517448d8ad6c8151fc9ac)):

<figure class="image" aria-label="rss.js">
<img
  src="/assets/blog/how-to-create-an-rss-feed-in-nextjs-10/rss-js.jpg"
  alt="rss.js"
  style="max-height: 600px;"
/>
<figcaption>rss.js</figcaption>
</figure>

The mechanism is the following:

1. `generateRss`:
    - accepts the full list of posts of your blog as input
    - prepares the structure of the RSS feed
    - injects a data structure for each post (see below)
    - returns the RSS feed as string
1. `generateRssItem`:
    - accepts a single post as input
    - prepares the structure of an RSS feed item
    - returns the RSS feed item as string

### I will help you, I have spoken

*"What's going on in here?"* you might be wondering.

Let's break it down, starting from the imports:

```javascript
import { BLOG_URL, BLOG_TITLE, BLOG_SUBTITLE} from '@lib/constants'
import markdownToHtml from '@lib/markdownToHtml'
```

I decided to stash some general information about the blog in `/lib/constants.js`, it's really up to you where you prefer to store these information.

The method `markdownToHtml` is a helper provided by [Next.js blog starter](https://github.com/vercel/next.js/tree/canary/examples/blog-starter), which allows you to convert content from markdown to HTML as you have surely guessed.

Side note: `@lib` resolves to `/lib` from anywhere, regardless the depth of the folder structure, thanks to `jsconfig.json` in the root folder (see [here](https://code.visualstudio.com/docs/languages/jsconfig#_using-webpack-aliases)).

Since `markdownToHTML` is asynchronous, `generateRssItem` needs to be asynchronous as well in order to `await` for its result:

```javascript
export async function generateRssItem(post) {
  const content = await markdownToHtml(post.content || '')

  // more code here
}
```

An RSS feed item, which represents a post on your blog, is structured as follows:

- `guid` is a unique identifier for the post, you can generate it the way you see fit
- `title` is the title of the post, of course
- `description` is the excerpt of the post
- `link` is the absolute URL of the post, including protocol and base URL of your blog
- `pubDate` is the date published
- `content:encoded` is the full content of your post, which applies the encapsulation [CDATA](https://en.wikipedia.org/wiki/CDATA) to assure your HTML to be correctly parsed

You can find a thorough list of properties [here](https://www.rssboard.org/rss-profile).

To assemble the whole RSS feed, all posts need to be scanned and converted to RSS items. The trick is using `await Promise.all(posts.map(generateRssItem))` in `generateRss` to make this happen:

```javascript
export async function generateRss(posts) {
  const itemsList = await Promise.all(posts.map(generateRssItem))

  // more code here
}
```

Now that you have all RSS items, you can add some general information to the RSS feed:

- `rss` is the root element of the XML document
- `channel` is an XML element containing the whole blog data, comprising general information and all posts
- `title` is the title of the blog
- `description` is the description of the blog
- `lastBuildDate` is the date of the most recent post
- `atom:link` element needs your absolute blog URL in its `href` property

Finally you can inject the RSS items generated in the previous step.

### This is the Way

In `/pages/index.js` there's a method `getStaticProps`, which is called by [Next.js](https://nextjs.org/) at build time (see [here](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation)).

The idea is generating your RSS feed as an XML file precisely at build time.

To do so, first import `generateRss` and `fs`, then modify `getStaticProps` as follows:

```javascript
export async function getStaticProps() {
  const allPosts = getAllPosts([
    'title',
    'date',
    'slug',
    'author',
    'coverImage',
    'excerpt',
    'content',
  ])
  const rss = await generateRss(allPosts)

  fs.writeFileSync('./public/rss.xml', rss)

  return {
    props: { allPosts },
  }
}
```

A few tweaks have been introduced:

- adding `content` to the array of fields passed to `getAllPosts`, used by `generateRssItem` to inject the full content of a post
- generating your RSS using `const rss = await generateRss(allPosts)`
- writing the result in an XML file, which **must** be placed in the `public` folder to be reachable by users and applications

A final touch would be updating your `.gitignore` to exclude `rss.xml`, which doesn't really need to be versioned.

An example of the final result is the [RSS feed I generated for this very blog](https://riccardo.codes/rss.xml).

### Who controls the spice controls the universe

You can now add a link to `/rss.xml` on your homepage to provide your users with a link they can add to their favorite feed reader.

<a id="cross-posting-from-blog-to-devto"></a>

Moreover on [dev.to](https://dev.to/), in *Settings > Extensions*, you can specify your RSS feed URL for [cross-posting](https://dictionary.cambridge.org/dictionary/english/cross-posting).

<figure class="image" aria-label="Cross-posting from your blog to dev.to">
<img
  src="/assets/blog/how-to-create-an-rss-feed-in-nextjs-10/devto-cross-posting-via-rss-feed.jpeg"
  alt="Cross-posting from your blog to dev.to"
  style="max-height: 300px;"
/>
<figcaption>Cross-posting from your blog to dev.to</figcaption>
</figure>

This way every time you publish on your blog `main` branch, a draft will be automatically created on your dev.to dashboard. You might need to re-add the cover image, but your post will be there from top to bottom.

### Conclusion

Next.js is still young and is missing some capabilities, such as RSS feed generation. However its design comprises only a handful of moving parts, which makes adjusting the project to meet your needs quite doable.

I'm fairly sure more features will come in time from Vercel and from Next.js community. Until then, don't be afraid to tinker with it.

> Somewhere, something incredible is waiting to be known.  
― Carl Sagan


How to create an RSS feed in Next.js 10


### What is Next.js?

[Next.js](https://nextjs.org/) is a Static Site Generator (SSG) based on [React](https://reactjs.org/).

According to the official website:

>Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

### Why choosing Next.js over Gatsby?

[Vercel](https://vercel.com/) recently released [Next.js 10](https://nextjs.org/blog/next-10), a stunning combination of power and simplicity.

The popular rival [Gatsby](https://www.gatsbyjs.com/) provides a lot of features and a wide range of plugins, but the overhead and the compulsory use of GraphQL might be considered overengineering by some users.

Gatsby still represents a valid tool, as usual it's a matter of trade off and personal taste.

### One small step

Vercel provides several [examples](https://github.com/vercel/next.js/tree/canary/examples/) to be used as templates for your projects.

A good starting point is certainly [blog-starter](https://github.com/vercel/next.js/tree/canary/examples/blog-starter), which can be seen in action [here](https://next-blog-starter.now.sh/).

It can be installed by executing:

```
npx create-next-app --example blog-starter blog-starter-app
# or
yarn create-next-app --example blog-starter blog-starter-app
```

if you prefer TypeScript:

```
npx create-next-app --example blog-starter-typescript blog-starter-app
# or
yarn create-next-app --example blog-starter-typescript blog-starter-app
```

Just replace `blog-starter-app` with the name of your project.

You can take a look at a local preview as follows:

1. `cd <your-project-folder>`
1. `npm run dev`

Browsing http://localhost:3000 you'd see the result.

It looks pretty nice already, doesn't it?

<figure class="image" aria-label="Next.js blog starter, local preview">
<img
  src="/assets/blog/how-to-create-a-blog-with-nextjs-10/nextjs-blog-starter-preview.jpeg"
  alt="Next.js blog starter, local preview"
  style="max-height: 600px;"
/>
<figcaption>Next.js blog starter, local preview</figcaption>
</figure>

### One giant leap

Opening the project on your favorite editor (e.g. Visual Studio Code) you'd see this folder structure:

<figure class="image" aria-label="Next.js blog starter, folder structure">
<img
  src="/assets/blog/how-to-create-a-blog-with-nextjs-10/nextjs-blog-starter-folder.jpg"
  alt="Next.js blog starter, folder structure"
  style="max-height: 400px;"
/>
<figcaption>Next.js blog starter, folder structure</figcaption>
</figure>

The most important folders are:

- `_posts`, your posts in `*.md` files (`*.mdx` are supported as well)
- `components`, React components for the UI
- `pages`, a special folder where the magic happens, files and folders here give your project **structure** as well as **routing** (more details below)
- `public`, where assets are stashed

A post on your blog would be a Markdown file with metadata used by Next.js to build a static page accordingly.
Information such as cover image or excerpt published on the homepage would appear here.

For example, this post...

<figure class="image" aria-label="Next.js blog starter, sample post file">
<img
  src="/assets/blog/how-to-create-a-blog-with-nextjs-10/nextjs-blog-starter-sample-post-file.jpeg"
  alt="Next.js blog starter, sample post file"
  style="max-height: 600px;"
/>
<figcaption>Next.js blog starter, sample post file</figcaption>
</figure>

...would be rendered like this:

<figure class="image" aria-label="Next.js blog starter, sample post preview">
<img
  src="/assets/blog/how-to-create-a-blog-with-nextjs-10/nextjs-blog-starter-sample-post-preview.jpeg"
  alt="Next.js blog starter, sample post preview"
  style="max-height: 600px;"
/>
<figcaption>Next.js blog starter, sample post preview</figcaption>
</figure>

### Second star to the right

Next.js has a file-system based routing, which detects subfolders and files in the special directory called `pages` creating routes accordingly.

Let's take a look at `pages`:

<figure class="image" aria-label="Next.js blog starter, pages folder">
<img
  src="/assets/blog/how-to-create-a-blog-with-nextjs-10/nextjs-blog-starter-pages.jpg"
  alt="Next.js blog starter, pages folder"
  style="max-height: 200px;"
/>
<figcaption>Next.js blog starter, pages folder</figcaption>
</figure>

It comprises the following files:

- `index.js` is the homepage of the site
- `_app.js` allows to introduce customization, such as styles, to be applied application wide
- `_document.js` allows to restructure the document as in the whole HTML document encapsulating your application
- `[slug].js` represents any given post, its name contains `[]` because it's leveraging dynamic routing

When you create a post as Markdown file in `_post` folder, the file name determines implicitly the slug of your post.
If your file is called `hello-world.md`, then its slug will be `hello-world`.

Next.js takes the relative path `pages/blog/[slug].js` and generates the route `/blog/:slug`, which in this case would be `/blog/hello-world`.

For further information please refer to [this documentation](https://nextjs.org/docs/routing/introduction).

### And straight on till morning

Feel free to explore the `components` folder and make changes to meet your needs.
Since they're mere React components they will probably look familiar.

### Conclusion

Next.js is quite opinionated and might feel odd at first maybe, but its gracious learning curve and the elegant minimalistic API design make it a phenomenal tool to add to your belt.

Setting aside personal tastes, Next.js is certainly worth your time.

> The mystery of life isn't a problem to solve, but a reality to experience.  
― Frank Herbert, Dune



Riccardo.codes

Thoughts and notes on web development and software engineering.

How to create an RSS feed in Next.js 10

November 29, 2020

How to create a blog with Next.js 10

November 23, 2020