Use Notion API to set up a blog

Front-end, API, Notion

If you're looking for an easy and efficient way to create a blog, using Notion API and NextJS may be a great option for you. Notion API is a powerful tool that allows you to access and manipulate your Notion database programmatically. On the other hand, NextJS is a popular React-based framework for building static and server-side rendered web applications.

As a developer, I'm always looking for ways to streamline my workflow and make the most out of the tools I have at my disposal. Recently, I came across the Notion API, which allows developers to programmatically interact with Notion's database and content. After playing around with the API, I realized that I could leverage it to create a dynamic blog that would allow me to easily manage my content.

To get started, I created a Notion database that would store all of my blog posts. The database had several fields, including Title, Cover, Slug, Date, Content, and Tags. The Slug field would be used to generate the URL for each blog post, while the Tags field would allow me to categorize my posts and display them in different sections of the blog.

Step 1: Set up your Notion database

Firstly, you need to create a database in Notion to store your blog posts. Create a new page in Notion, select "Database" from the dropdown, and choose the "Blog" template. Add any fields you want to include in your blog post, such as title, content, date, and tags.

Step 2: Set up Notion API

Next, you need to set up Notion API to access your database programmatically. Go to the Notion API page and follow the instructions to create an integration and get your API key.

Step 3: Connect your Notion database to NextJS

Now, we need to connect our Notion database to NextJS. To do this, we will use the notion-client library, which provides a simple way to retrieve data from Notion API.

First, create a .env.local file in your NextJS project's root directory and add the following:

NOTION_API_KEY=YOUR_API_KEY
NOTION_DATABASE_ID=YOUR_DATABASE_ID

Then, install notion-client using npm:

npm install notion-client

Next, create a lib/notion.js file and add the following code:

import { Client } from "@notionhq/client";

const notion = new Client({ auth: process.env.NOTION_API_KEY });

export async function getDatabase() {
  const { results } = await notion.databases.query({
    database_id: process.env.NOTION_DATABASE_ID,
  });

  return results;
}

export async function getPage(pageId) {
  const page = await notion.pages.retrieve({ page_id: pageId });

  return page;
}

This code creates a Notion client instance and exports two functions: getDatabase and getPage. getDatabase retrieves all the pages in your Notion database, and getPage retrieves a single page by ID.

With the data in hand, I then created a dynamic route for each blog post using NextJS's file-based routing system. The dynamic route would use the Slug field from the Notion database to generate the URL for each blog post. For example, if a blog post had the Slug "my-first-blog-post", the URL for that post would be "luistellez.com/blog/my-first-blog-post".

Step 4: Create a blog post template Next, we need to create a template for our blog post. Create a components/BlogPost.js file and add the following code:

import { getPage } from "../lib/notion";

export default function BlogPost({ page }) {
  return (
    <>
      <h1>{page.properties.Title.title[0].text.content}</h1>
      <p>{page.properties.Content.rich_text[0].text.content}</p>
    </>
  );
}

export async function getStaticProps({ params }) {
  const page = await getPage(params.slug);

  return {
    props: {
      page,
    },
    revalidate: 60,
  };
}

export async function getStaticPaths() {
  const pages = await getDatabase();

  const paths = pages.map((page) => ({
    params: { slug: page.id },
  }));

  return {
    paths,
    fallback: false,
  };
}

This code exports a BlogPost component that takes a page prop and renders the page's title and content. It also exports two functions, getStaticProps and getStaticPaths, which are used by NextJS to generate static pages for each blog post.

Conclusion

Overall, I found the process of creating a blog using the Notion API and NextJS to be straightforward and intuitive. Not only does it allow me to easily manage my content, but it also gives me the flexibility to customize my blog and add new features as needed. If you're looking for a powerful and flexible way to create a dynamic blog, I highly recommend giving this approach a try!