DEV Community: Riccardo Bevilacqua

How to create an RSS feed in Next.js 10

Riccardo Bevilacqua — Sun, 29 Nov 2020 05:00:00 +0000

What is an RSS feed?

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. 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 (see here).

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):

rss.js

The mechanism is the following:

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
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:

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, 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).

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

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 to assure your HTML to be correctly parsed

You can find a thorough list of properties here.

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:

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 at build time (see here).

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:

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.

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.

Moreover on dev.to, in Settings > Extensions, you can specify your RSS feed URL for cross-posting.

Cross-posting from your blog to dev.to

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 a blog with Next.js 10

Riccardo Bevilacqua — Mon, 23 Nov 2020 00:00:00 +0000

What is Next.js?

Next.js is a Static Site Generator (SSG) based on React.

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 recently released Next.js 10, a stunning combination of power and simplicity.

The popular rival Gatsby 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 to be used as templates for your projects.

A good starting point is certainly blog-starter, which can be seen in action here.

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:

cd <your-project-folder>
npm run dev

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

It looks pretty nice already, doesn't it?

Next.js blog starter, local preview

One giant leap

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

Next.js blog starter, folder structure

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...

Next.js blog starter, sample post file

...would be rendered like this:

Next.js blog starter, sample post preview

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:

Next.js blog starter, pages folder

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.

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