Use Notion as a CMS for your NextJS blog

In our first detailed guide, we want to help you build a blog just like ours using Notion as the CMS. Notion works great because it supports a lot of different types of elements out of the box and anyone in the team (without needing to know how to code) can simply go in and edit the content and the changes are reflected instantly on the blog.

The Railway blog is a NextJS app that uses Notion's private API as the backend for the blog posts. The posts are all stored on a table in Notion where each row is a separate page containing all the details of a single post from the URL slug, to the post authors and the content itself.

In this post, we will walk you through creating the same framework for your blog. From setting up Notion as your CMS all the way to deploying the final application on Railway.

In this section, we'll set things up on Notion so that our app can consume them. We'll start by creating an inline table and then adding the necessary fields to it.

Posts table

As you can see in the GIF above, we added the following fields:

• Page (Title) - The page containing a post
• Slug (Text) - The URL of a post
• Published (Checkbox) - Only published blog posts show up on the website
• Date (Date) - The date the post was published
• Authors (Person) - A list of users that wrote the post
• Image (Text) - The URL of the meta image for a post

The natural next step is to write our first post for our blog. Expand any of the blank rows in the posts table and fill out the necessary fields.

Post details

As you can see in the image above, we fill out all the fields we defined earlier and then write the preview text for our post and also the content of the post itself.

https://railway.app/new/template?template=https%3A%2F%2Fgithub.com%2Frailwayapp%2Fblog&envs=BLOG_INDEX_ID%2CNOTION_TOKEN&BLOG_INDEX_IDDesc=ID+of+the+Notion+page+containing+your+blog&NOTION_TOKENDesc=Your+token+for+Notion

As promised, deploying a blog similar to ours on Railway can be done with the click of a button (you can also see the code that the button deploys on Github). Listed below are the required environment variables:

• BLOG_INDEX_ID: If the URL of your page is https://www.notion.so/Blog-S5qv1QbUzM1wxm3H3SZRQkupi7XjXTul, then your BLOG_INDEX_ID is S5qv1QbU-zM1w-xm3H-3SZR-Qkupi7XjXTul
• NOTION_TOKEN: Open the developer console in your browser, and use the token_v2 cookie.

Once you have the required variables, just add them to Railway and click Deploy. Your app should now start deploying and once that's done, you should be able to see the post you wrote live on the website you just deployed!

Blog in production

With that, we have deployed our own blog using Notion as the CMS within minutes. We hope this gives you an idea of what our goal with Railway is. We want people to be able to create starters that they can share and then have their friends/teammates deploy them with the click of a button.

We also hope you enjoyed reading this blog post. Please reach out to us with feedback, suggestions, and ideas on Twitter and/or Discord. If you would like to contribute to Railway, we are very happy to have people make PRs to our starters repository.

• The starter template for this blog is heavily based on this example so a massive shoutout to JJ Kasper for the idea.
• Based on the source you use for your images, you will probably need to update the image key inside the next.config.js file.