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
Deploy your own Notion blog with Vercel.
- Clone this repo
git clone https://github.com/ijjk/notion-blog.git
- Configure project with
- Add your
BLOG_INDEX_IDas environment variables in your project. See here for how to find these values
- Do final deployment with
Need to create a notion account and a vercel account. Both of them don't need to pay or register your credit card. This step won't take so much time. Also if you don't have a GitHub account, please create it.
If you don't want to use
GitHub, you can use
This step sounds a little bit complicated, but actually it's very easy since this step only needs to click a button.
You just need to follow the images.
We are almost there.
Probably, this step is a little bit tricky, but if you know
Developer Tools, it shouldn't be difficult.
The setup process is done 😁
You can use notion desktop app or notion website to write an article. Once you edit an item on the table and check
published, your article will be published in a couple of minutes.
notion-blog is made by
next.js that is the react framework for
SSR(server-side rendering). So if you are familiar with reactjs, customizing your blog isn't very hard.
You can use a custom domain for your blog.
Hopefully, this will be useful to you!
My notion-blog is here