Using Notion and Next.js ISR to sync content across platforms

Publishing content across multiple platforms offers a number of advantages for content creators. Third-party platforms provide authors a wider reach and access to a dedicated user base. Publishing content on a personal website gives the author complete creative control over their content and its presentation.

Ensuring synchronicity across platforms can be laborious, time-consuming, and prone to human error. It requires careful attention to detail, an efficient workflow, and a commitment to maintaining consistency and accuracy across all published platforms.

This article will demonstrate an optimized workflow for creating and publishing synchronized blog content across the web. For additional context, the final solution is available on GitHub and deployed on Vercel.

The approach primarily uses Notion and the Notion API to create a single source of truth for the content. It also integrates the Incremental Static Regeneration feature into a Next.js website to ensure effortless synchronization of each article across the platforms.

Creating a blog database with Notion

Notion is a powerful productivity tool that caters to both individual users and large enterprise teams. This article uses Notion to create a small database of technical blog posts, along with a custom integration that will allow our Next.js website to retrieve the content from a personal workspace.

Setting up the database

To get started, create a new page in your Notion workspace and select the Table template. With the table created, selecting the “+ New Database” option from the Data Source menu creates a blank table on the page. Each row on the table will contain the following information:

The “Published” column allows the Next.js website to filter any unfinished articles. This also allows a grace period for the article to be published on a third-party platform before it goes live on the personal website.

The “Page” column links to a subpage in Notion with the respective article’s content. We’ll use this subpage later to retrieve the content blocks for each article in the Next.js website.

The “Canonical” column helps specify the preferred URL of the content when multiple versions exist across various platforms. Where the Notion article can be considered the source of truth for the content, the canonical URL is considered the source of truth for search engine rankings.

The remaining columns contain frontmatter for each article:

• Date — Allows the articles to be sorted into chronological order
• Tags — Can be used to filter the articles by a specific category
• Abstract — Provides a short description of the article to pique the user’s interest
• Slug — A unique identifier for retrieving the post’s content

Setting up the custom integration

Let’s now create the integration that will allow the Next.js website to make authenticated requests to the database in the workspace.

In Notion, open the My Integrations page and select “Create New Integration.” Since this integration will be private, choose “Internal Integration.”

Give the integration a name and associate it with your workspace. Then, select “Read Content” from the Content Capabilities and check the “No User Information” radio button in User Capabilities.

You can leave all Comment Capabilities unchecked. This will permit the website to retrieve the content without assigning any unnecessary permissions.

You should end up with something like the following:

Integrating Next.js with Notion

Previously, publishing articles on my personal website was a manual, error-prone task that involved copying, pasting, and refining content into separate markdown files. This process was tedious and made it difficult to maintain consistency across the platforms.

Fortunately, with the help of the Notion API, this task can now be automated!

Let’s configure a Next.js project that retrieves all of the content from the database we created earlier. To accomplish this, we’ll create a custom client to fetch the posts and use our custom integration from Notion to authenticate the requests.

Configuring environment variables

There are two environment variables required to authenticate and retrieve the database content.

The first is the Internal Integration Token, which can be found in the “Secrets” menu after creating the integration:

The second is the Database ID. You can find this in the Notion URL between the workspace and the View ID, shown in bold below:

Loading...

Let’s add these variables to the Next.js application’s local environment and the project dashboard. Paste the following code into the

Loading...

The Environment Variables section in the Settings menu on the Vercel project dashboard should look something like the image below:

Note that the token and database ID values presented here are invalid and for demonstration purposes only. You should never share these values outside of your Vercel project dashboard and environment files.

Fetching data from Notion

With the Notion integration successfully configured, the next step is to create a client that fetches the posts from the Notion database and stores the result in Markdown files.

To achieve this, we’ll start by creating a new

Loading...

With the authenticated client, we can now make requests to retrieve the content from the Notion database using the

Loading...

In the code above, we declared an asynchronous function

Creating Markdown files

If we inspect the

Loading...

Although it’s possible to serialize each block manually, we’ll use a third-party wrapper —

To convert the Notion content blocks to a Markdown file, we’ll create an

Add the following code to the

Loading...

We can then define a

Initially, the

Finally, we can create a Markdown file for each post using the “Slug” column property as the filename and populating it with the newly-created Markdown string: