Notion-backed Next.js Blog

The Notion Blog example is a Next.js project that showcases the upcoming Static Site Generation (SSG) support in Next.js using Notion’s private API as a backend. This project allows you to create a blog using Notion as the content management system and Next.js for rendering the blog.

Here are the key steps to get started with this example:

Live Example: You can view a live example of this Notion blog hosted on Vercel here.

Getting Started:

1. Deploy Your Own:
   • Deploy your own Notion blog with Vercel.
   • You’ll need to configure your project with environment variables, including NOTION_TOKEN and BLOG_INDEX_ID. Instructions on how to find these values are provided.
2. Clone the Repo:
   • Alternatively, you can clone the repository using git clone https://github.com/ijjk/notion-blog.git.
3. Configure Environment Variables:
   • Add your NOTION_TOKEN and BLOG_INDEX_ID as environment variables in your project. You can find detailed instructions on how to obtain these values in the provided documentation.
4. Create Your Pages Table:
   • You can create a table in Notion to manage your blog posts. The script provided in the repository helps you set up this table with the required fields.
   • The table should include fields like Page, Slug, Published, Date, and Authors.

Getting Blog Index and Token:

• Instructions are provided on how to obtain your BLOG_INDEX_ID from your Notion page.
• To get your Notion token (token_v2), you need to look for the token_v2 cookie in Notion.

Creating Blog Posts:

• In Notion, you can create blog posts by adding rows to the table you created earlier.
• Fill in details such as Page name, slug, Date, and Authors.
• Structure your content with a preview section (under 2 paragraphs), a divider block, and the rest of your content.

Running Locally:

• To run the project locally, follow the deployment steps and configure the environment variables.
• Install dependencies with yarn.
• Set the NOTION_TOKEN and BLOG_INDEX_ID environment variables.
• Run the project in development mode with yarn dev.
• You can also build and run it in production mode with yarn build && yarn start.

Credits:

• This project was inspired by Guillermo Rauch (@rauchg) and received design help from Shu Ding (@shuding_) and Luis Alvarez (@luis_fades).

Please note that this example uses experimental features and a private API, so it’s important to use it at your own risk as these features may change over time.