A Next.js site using new SSG support with a Notion backed 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/
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 Notion blog with Vercel.
or
git clone https://github.com/ijjk/notion-blog.git
vc
NOTION_TOKEN
and BLOG_INDEX_ID
as environment variables in your project. See here for how to find these valuesvc
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
Note: this is auto run if a table isn't detected the first time visiting /blog
git clone https://github.com/ijjk/notion-blog.git
cd notion-blog && yarn
NOTION_TOKEN='token' BLOG_INDEX_ID='new-page-id' node scripts/create-table.js
See here for finding the id for the new pageThe table should have the following properties:
Page
: this the blog post's pageSlug
: this is the blog post's slug relative to /blog
, it should be a text propertyPublished
: this filters blog posts in production, it should be a checkbox propertyDate
: this is when the blog post appears as posted, it should be a date propertyAuthors
: this is a list of Notion users that wrote the post, it should be a person propertyTo 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:
BLOG_INDEX_ID
is S5qv1QbU-zM1w-xm3H-3SZR-Qkupi7XjXTul
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.
To run the project locally you need to follow steps 1 and 2 of deploying and then follow the below steps
yarn
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 Windowsyarn dev
yarn build && yarn start
A Next.js site using new SSG support with a Notion backed 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/
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 Notion blog with Vercel.
or
git clone https://github.com/ijjk/notion-blog.git
vc
NOTION_TOKEN
and BLOG_INDEX_ID
as environment variables in your project. See here for how to find these valuesvc
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
Note: this is auto run if a table isn't detected the first time visiting /blog
git clone https://github.com/ijjk/notion-blog.git
cd notion-blog && yarn
NOTION_TOKEN='token' BLOG_INDEX_ID='new-page-id' node scripts/create-table.js
See here for finding the id for the new pageThe table should have the following properties:
Page
: this the blog post's pageSlug
: this is the blog post's slug relative to /blog
, it should be a text propertyPublished
: this filters blog posts in production, it should be a checkbox propertyDate
: this is when the blog post appears as posted, it should be a date propertyAuthors
: this is a list of Notion users that wrote the post, it should be a person propertyTo 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:
BLOG_INDEX_ID
is S5qv1QbU-zM1w-xm3H-3SZR-Qkupi7XjXTul
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.
To run the project locally you need to follow steps 1 and 2 of deploying and then follow the below steps
yarn
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 Windowsyarn dev
yarn build && yarn start