Notion Blog

This is an example Next.js project that shows Next.js' upcoming SSG (static-site generation) support using Notion's private API for a backend.

Note: This example uses the experimental SSG hooks only available in the Next.js canary branch! The APIs used within this example will change over time. Since it is using a private API and experimental features, use at your own risk as these things could change at any moment.

Live Example hosted on Vercel: https://notion-blog.vercel.app/

Getting Started

To view the steps to setup Notion to work with this example view the post at https://notion-blog.vercel.app/blog/my-first-post or follow the steps below.

Deploy Your Own

Deploy your own Notion blog with Vercel.

or

Clone this repo git clone https://github.com/ijjk/notion-blog.git
Configure project with vc
Add your NOTION_TOKEN and BLOG_INDEX_ID as environment variables in your project. See here for how to find these values
Do final deployment with vc

Note: if redeploying with vc locally and you haven't made any changes to the application's source and only edited in Notion you will need use vc -f to bypass build de-duping

Creating Your Pages Table

Note: this is auto run if a table isn't detected the first time visiting /blog

Using the Pre-Configured Script

Create a blank page in Notion
Clone this repo git clone https://github.com/ijjk/notion-blog.git
Install dependencies cd notion-blog && yarn
Run script to create table NOTION_TOKEN='token' BLOG_INDEX_ID='new-page-id' node scripts/create-table.js See here for finding the id for the new page

Manually Creating the Table

Create a blank page in Notion
Create a inline table on that page, don't use a full page table as it requires querying differently
Add the below fields to the table

The table should have the following properties:

Page: this the blog post's page
Slug: this is the blog post's slug relative to /blog, it should be a text property
Published: this filters blog posts in production, it should be a checkbox property
Date: this is when the blog post appears as posted, it should be a date property
Authors: this is a list of Notion users that wrote the post, it should be a person property

Getting Blog Index and Token

To get your blog index value, open Notion and Navigate to the Notion page with the table you created above. While on this page you should be able to get the page id from either:

the URL, if the URL of your page is https://www.notion.so/Blog-S5qv1QbUzM1wxm3H3SZRQkupi7XjXTul then your BLOG_INDEX_ID is S5qv1QbU-zM1w-xm3H-3SZR-Qkupi7XjXTul
the loadPageChunk request, if you open your developer console and go to the network tab then reload the page you should see a request for loadPageChunk and in the request payload you should see a pageId and that is your BLOG_INDEX_ID

To get your Notion token, open Notion and look for the token_v2 cookie.

Creating Blog Posts

In Notion click new on the table to add a new row
Fill in the Page name, slug, Date, and Authors
At the top of the content area add the content you want to show as a preview (keep this under 2 paragraphs)
Add a divider block under your preview content
Add the rest of your content under the divider block

Running Locally

To run the project locally you need to follow steps 1 and 2 of deploying and then follow the below steps

Install dependencies yarn
Expose NOTION_TOKEN and BLOG_INDEX_ID in your environment export NOTION_TOKEN='<your-token>'and export BLOG_INDEX_ID='<your-blog-index-id>' or set NOTION_TOKEN="<your-token>" && set BLOG_INDEX_ID="<your-blog-index-id>" for Windows
Run next in development mode yarn dev
Build and run in production mode yarn build && yarn start

Credits

Guillermo Rauch @rauchg for the initial idea
Shu Ding @shuding_ for the design help
Luis Alvarez @luis_fades for design help and bug catching

License

hjh1004/nextjs-notion-blog

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages