ijjk/notion-blog

A Next.js site using new SSG support with a Notion backed blog

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

1. Clone this repo git clone https://github.com/ijjk/notion-blog.git
2. Configure project with vc
3. Add your NOTION_TOKEN and BLOG_INDEX_ID as environment variables in your project. See here for how to find these values
4. 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

1. Create a blank page in Notion
2. Clone this repo git clone https://github.com/ijjk/notion-blog.git
3. Install dependencies cd notion-blog && yarn
4. 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

1. Create a blank page in Notion
2. Create a inline table on that page, don't use a full page table as it requires querying differently
3. 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

1. In Notion click new on the table to add a new row
2. Fill in the Page name, slug, Date, and Authors
3. At the top of the content area add the content you want to show as a preview (keep this under 2 paragraphs)
4. Add a divider block under your preview content
5. 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

1. Install dependencies yarn
2. 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
3. Run next in development mode yarn dev
4. 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

notion-blog's Issues

How to use on existing next project as plugin?

Do you have plans for supporting this as a package / plugin?

As i understand, I should clone & modify some logics and copy/paste on my existing nextproj in order to make it available on it.
Is it correct?

Here comes the Notion's official API (beta).

https://www.notion.so/api-beta

Invalid blog-index-id should be 32 characters long

Hello,

I got a bug or my problem in here.

I have followed the guidelines in here

My error is
Error: Invalid blog-index-id: "a3a2eb5f-e142-4a20-a164-c6f3ee2ddf43" should be 32 characters long. Info here https://github.com/ijjk/notion-blog#getting-blog-index-and-token at normalizeId (D:\13. NextJS\notion-blog\src\lib\notion\server-constants.js:8:11) at Object.<anonymous> (D:\13. NextJS\notion-blog\src\lib\notion\server-constants.js:19:23) at Module._compile (internal/modules/cjs/loader.js:955:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10) at Module.load (internal/modules/cjs/loader.js:811:32) at Function.Module._load (internal/modules/cjs/loader.js:723:14) at Module.require (internal/modules/cjs/loader.js:848:19) at require (internal/modules/cjs/helpers.js:74:18) at Object.<anonymous> (D:\13. NextJS\notion-blog\next.config.js:6:5) at Module._compile (internal/modules/cjs/loader.js:955:30) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I tried this too
set NOTION_TOKEN="<REDACTED>" && set BLOG_INDEX_ID="a3a2eb5fe1424a20a164c6f3ee2ddf43"

and still getting error
Error: Invalid blog-index-id: "a3a2eb5fe1424a20a164c6f3ee2ddf43" should be 32 characters long. Info here https://github.com/ijjk/notion-blog#getting-blog-index-and-token at normalizeId (D:\13. NextJS\notion-blog\src\lib\notion\server-constants.js:8:11) at Object.<anonymous> (D:\13. NextJS\notion-blog\src\lib\notion\server-constants.js:19:23) at Module._compile (internal/modules/cjs/loader.js:955:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10) at Module.load (internal/modules/cjs/loader.js:811:32) at Function.Module._load (internal/modules/cjs/loader.js:723:14) at Module.require (internal/modules/cjs/loader.js:848:19) at require (internal/modules/cjs/helpers.js:74:18) at Object.<anonymous> (D:\13. NextJS\notion-blog\next.config.js:6:5) at Module._compile (internal/modules/cjs/loader.js:955:30) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Maybe anyone can help me? Thx :D

Serving Images from Vercel

Hi everyone,

I really like the idea of the Notion Integration, as it's really hard to find a simple CMS. Here is a question fro a Next beginner:

Is there a way to improve the handling of images? As much as I understand, Unsplash images added via Notion will be served from Unsplash, while uploaded images are served with AWS. From what I can see in the code of a deployed site, these images are not optimised, i.e. responsive. When serving two images only, that leads to a 60-70% PageSpeed Score and because they are not cached, they reload every time.

Would there be any way to pull these images automatically from Notion, and serve them via Vercel and next/image? By doing so, I assume, they could be cached. Here's how I'd imagine the process roughly:

• Loading (external) imageURL from Notion
• Storing image in an assets folder
• Inserting responsive local images from assets with next/image

A potential way forward might be outlined at the bottom this post or in this repository.

Personally, I would very enjoy this function as I'm building a website for a student entrepreneurship club that comes with many images in the future.

Thanks in advance!

NOTION_TOKEN & BLOG_INDEX_ID references secret that does not exist

Heya,

Tried to deploy this using vercel, I've set both env vars in vercel NOTION_TOKEN & BLOG_INDEX_ID , and I'm getting this error for both tokens

Environment Variable "BLOG_INDEX_ID" references Secret "blog-index-id", which does not exist.
Environment Variable "NOTION_TOKEN" references Secret "notion-token", which does not exist.

I got the BLOG_INDEX_ID from the URL on Notion and the NOTION_TOKEN from the token_v2 cookie in chrome dev tools. Are you able to help me troubleshoot this issue?

[suggestion]: add pagination to blog index page

I notice that there is a comment in getBlogIndex.ts:
// only get 10 most recent post's previews
I dont't know why only 10, but I guess too much preview may effect performance, so I suggest maybe pagination is a good way to solve this.

Unable to validate my notion token on running create-table.js

So I have tried to run create_table and got this error. I am pulling token_v2 from my notion cookies and using the last part of my pages table slug as blog_index_id. Sharing a snip of that as well.

Additionally, I created a manual table to work around this but seems like vercel doesn't hit it. Where am I going wrong in both cases?

STACK
NOTION_TOKEN='notion_token' BLOG_INDEX_ID='id' node scripts/create-table.js (node:71470) UnhandledPromiseRejectionWarning: Error: failed to get Notion user id, request status: 401 at getUserId (/Users/utkarshgupta/Documents/GitHub/notion-blog/src/lib/notion/createTable.js:366:11) at processTicksAndRejections (internal/process/task_queues.js:86:5) (node:71470) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:71470) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Other Language Support for Syntax Highlight

When I used a language like Ruby, the following error occurred.

ERROR	TypeError: Cannot read property 'rest' of undefined

This is because Prism doesn't support languages like Ruby by default.

notion-blog/src/components/code.tsx

Lines 9 to 12 in 3acc5bd

	__html: Prism.highlight(
	children,
	Prism.languages[language.toLowerCase()]
	),

Unable to generate notion token

When i run NOTION_TOKEN='token' BLOG_INDEX_ID='new-page-id' node scripts/create-table.js
I get this:

ssr and ssg

what is the difference between this repo and the spr landing version, it seems the spr already renamed to ssg? thanks

Page mentions can be rendered as a links?.

Now a page mention is not rendered, but if we have a page reference to a page that is published, it should be converted to link, isnt it?.

sitemap and RSS generation

This is in general nextjs/Vercel but how can something like this be put into the current notion-blog ?

Error while importing on Github integration step

I'm getting the following error:

I do observe that the repo is created, but I cannot proceed.

Locally does not work

I added an environment variable and tried to run it locally, but it didn't work.

The following modules were added because some of them failed to be found locally

"async-sema": "^3.1.0",
"uuid": "^8.1.0"

In addition, the following modifications were also made.

/src/lib/notion/createTable.js

const uuid = require('uuid/v4');
↓
const { v4: uuidV4 } = require('uuid');

In this case, the following error appears.

Any suggestion on how to fix it?

HTTP429 ERROR

Recently, when I view the list of blogs 10 times in a row (using the incognito window), I get HTTP429 error in Notion. And you will not be able to retrieve the articles. Is this a limitation on the Notion side?

Nested List Support

List on notion-blog is not nested correctly.

Any plan to support a nested list ❓

List on Notion

List on notion-blog

Blog posts don't show

I followed all the steps, set the token and ID, but the posts do not appear. what could it be?

Any plan to support official Notion API?

Thanks for the great work and I'm wondering if there is any plan to support the official Notion API with notion-sdk-js.

Error

Error occurred prerendering page "/blog". Read more: https://nextjs.org/docs/messages/prerender-error

Using react-notion-x?

Hey @ijjk 👋

First off, I wanted to say that I love this template. Really glad that so many people have found it useful in getting started using Notion as a CMS.

I was wondering if you'd considered using react-notion-x to render Notion content instead of only supporting a few blocks?

react-notion-x is relatively lightweight, with larger components like databases and pdfs being loaded lazily in separate bundles, and most importantly it has been tested by thousands of notion websites in production.

If you're interested in the possibility, let me know and I'd be happy to offer a PR.

Cheers

Abstract out all of the Environment Variables

Make customising the blog easier by moving the env to env

    CONTACT_EMAIL
    CONTACT_NAME
    HOME_HOST
    BLOG_TITLE
    BLOG_NAME
    OG_IMAGE_URL
    META_DESCRIPTION
    TWITTER
    LINKEDIN
    GITHUB
    AVATAR_URL

In-page tables, URL Bookmarks not rendered

Hello and a big thumbs up to all involved in this project!
I could get my blog set up in minutes, however faced some issues with:

---

• In-page tables
  Notion
  
  Rendered
  

• URL Bookmarks
  Notion
  
  Rendered
  

---

So, as shown, these elements are simply going missing. Would love to have some discussion, this would help me to reframe the elements other ways, or if this's expected I could also work on a PR to fix this, thanks! :)

[feature suggestion] Is it possible to add a section of comments?

Thanks for your wonderful work! Is it possible to add a section of comments at the end of each blog? Then the readers can leave comments on the contents, and the author would be able to respond to these comments.

Dark mode

Is it possible to include a dark mode functionality?

Remove unused resources

What are some limitations?

Thanks for making the transition from Notion to a blog easier!
Haven't fully explored the capabilities, but what are some limitations to this?

Some of the things I saw were:

• tables and databases in a page are not rendered (#25)
• page mentions are not rendered (#45)
• adding tags and filtering the posts based on the tags

Are these functionalities easy to implement? Haven't really used ts before, so I have no idea.

Ordering of blog posts in the Notion table

I thought the blog ordered the articles by mirroring the order in Notion, but it doesn't seem to work that way. For example I published a post on March 2nd that looks first in my Notion table (ordered by Date- Ascending) but is at the bottom of the summary page.

How to make sure the blog follows the same order of the table?
Thanks!

Is this project sustainable?

First, great work and beautiful design, I love it !
I want to use this project to build my blog, but looks like it "reverse engineered Notion's private API to build a blazing fast blog", so is this a hidden danger that might make this project unsustainable in the future? What if Notion's API changed?

Notion page is not available

Tried to open page in the setup. It says that "This content does not exist". Not sure why.

Support running on local via docker

Need help to make it 🙏🙏

Existing secret "notion-token" will be used

Hello there,

I tried to deploy one time. But I probably entered the wrong token and id. I delete project and try again.
But this time I can't change my token and index-id on vercel

Does anyone have a same issue?

CSS font color inconsistency

I've noticed that the list items gets rendered in a different font color than the paragraph (e.g. this post

Any suggestion on how to fix it?

How to open RSS?

Just find a file: src/lib/build-rss.ts, looks like RSS feed will automatically generate. How to open or use it?

Failed to load Notion posts

Hey, I just found that the notion blog posts became empty. The site https://notion-blog.vercel.app/blog shows nothing. Could it be that the Notion's API is not accessible anymore? or they changed the response structure or something else. I have tried to use the latest notion token and it doesn't work either.

image source issue

I found when I upload an image via notion , it can be rendered correctly , but I insert an image link which the image is outside notion. it can not be rendered correctly, its url is end with undefined.

Fast refresh doesn't seem to be enabled after updating next package

First of all, thank you for this amazing template.

I updated next package to 10.x with the hope to have fast refresh enabled but it seems it doesn't fast refresh. Any idea why?

Incorporating two tables that link to two separate pages

Hi JJ,

Is it possible to have two seperate pages/tables within a Notion workspace routing to two different pages? For example having a Blog page and a Podcast page that each pull from their own tables.

Thanks

Problems with Notion the blog doesn't work

Mac book, OSX: 10.15.7
Notion 2.0.17

I state that I am not an expert. i managed to get online with vercel and with the localhost.
in the .env file I manually entered the token and the blog id.
I used the code:

export NOTION_TOKEN = '' and export BLOG_INDEX_ID = ''

but it's like it's not connected to Notion. It does not read the table I made following the instructions.

it's like it doesn't read the BLOG_INDEX_ID and the Notion_Token
I tried to insert it in many ways and nothing, it does not create any pages

Can you take a step by step video please?

quello che vedo #

Notion API has changed

The NotionAPI (unofficial) has changed its interface, so blog pages can no longer be retrieved.

https://notion-blog.vercel.app/blog

e.g :

notion-blog/src/lib/notion/createTable.js

Lines 328 to 341 in b35fcbc

	const res = await fetch(`${API_ENDPOINT}/loadPageChunk`, {
	method: 'POST',
	headers: {
	cookie: `token_v2=${NOTION_TOKEN}`,
	'content-type': 'application/json',
	},
	body: JSON.stringify({
	pageId,
	limit: 25,
	cursor: { stack: [] },
	chunkNumber: 0,
	verticalColumns: false,
	}),
	})

# current version
  const res = await fetch(`${API_ENDPOINT}/loadPageChunk`, {
    method: 'POST',
    headers: {
      cookie: `token_v2=${NOTION_TOKEN}`,
      'content-type': 'application/json',
    },
    body: JSON.stringify({
      pageId,
      limit: 25,
      cursor: { stack: [] },
      chunkNumber: 0,
      verticalColumns: false,
    }),
  })

# fixed version
  const res = await fetch(`${API_ENDPOINT}/loadCachedPageChunk`, {
    method: 'POST',
    headers: {
      cookie: `token_v2=${NOTION_TOKEN}`,
      'content-type': 'application/json',
    },
    body: JSON.stringify({
      page: { id : pageId },
      limit: 25,
      cursor: { stack: [] },
      chunkNumber: 0,
      verticalColumns: false,
    }),
  })

TypeError: text is not iterable

16:31:56.740 | TypeError: text is not iterable
16:31:56.740 | at textBlock (/vercel/workpath0/.next/serverless/scripts/build-rss.js:908:26)
16:31:56.740 | at /vercel/workpath0/.next/serverless/scripts/build-rss.js:767:222
16:31:56.740 | at Array.map ()
16:31:56.741 | at mapToEntry (/vercel/workpath0/.next/serverless/scripts/build-rss.js:767:127)
16:31:56.741 | at Array.map ()
16:31:56.741 | at createRSS (/vercel/workpath0/.next/serverless/scripts/build-rss.js:782:33)
16:31:56.741 | at main (/vercel/workpath0/.next/serverless/scripts/build-rss.js:818:145)
16:31:56.741 | at processTicksAndRejections (internal/process/task_queues.js:97:5)

This is my repository NotionBlog

When trying to run the create-table.js script, this error shows

NOTION_TOKEN=
'8b37e3c2f5a6b88b8cf06153b85cc2fef716e75a2a0bfdc0776b78140104bcc730a931f0c7a5fda1812b8841462116e4d46b0d5a5c7692b1f8fba7a6612430eb13cfee8d9441f38ecfa115fe8e21'
BLOG_INDEX_ID=
'508aa820-0e7d-495a-85e4-7f1fb98b4330'
node scripts/create-table.js

(node:99922) UnhandledPromiseRejectionWarning: TypeError: Cannot convert undefined or null to object
at Function.keys ()
at getExistingexistingBlockId (/home/lucas/Desktop/gitrepostocheck/mom-blog/src/lib/notion/createTable.js:349:21)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async main (/home/lucas/Desktop/gitrepostocheck/mom-blog/src/lib/notion/createTable.js:20:25)
(Use node --trace-warnings ... to show where the warning was created)
(node:99922) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:99922) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Sao pres Zeit button thats it?

It says to press on Zeit one-click button OR the following. So if we press Zeit we don't need to enter the token anywhere? In can't find the notion page

Rendering a page

In the given example, is it possible to render the contents of Home and Contact section of the nextjs site from a notion page?

Should be bumped to the latest version of next

Remove the unstable methods + add preview mode.

@ijjk I took a stab at this on a fork:
https://github.com/wbunting/notion-blog

Adds some api routes to enable / disable preview mode as well as adds a banner to show the user that they are in preview and which posts are drafts.

If the changes look good to you I can PR on this repo with the patch.

API /loadPageChunk no longer used by notion

Hi! I try to reverse engineer notion API and it turns out that notion using /loadCachedPageChunk instead of /loadPageChunk. I think we need to update this lib. Thanks

Code overflow and support inline code?

It's better to add overflow: auto; into code style to avoid code overflow. I am wondering if this blog could support the inline code ``. Also, I used <marquee> for the notion type: callout. This is my personal suggestion.

Build Error

Deployment failed with error.

Fetching Source Code
6s

Skipping Build Cache
3s

Building
22:59:14.714
Installing dependencies...
22:59:15.021
yarn install v1.22.11
22:59:15.114
[1/4] Resolving packages...
22:59:15.347
[2/4] Fetching packages...
22:59:27.641
info [email protected]: The platform "linux" is incompatible with this module.
22:59:27.642
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
22:59:27.652
[3/4] Linking dependencies...
22:59:27.654
warning " > @zeit/[email protected]" has incorrect peer dependency "react@^16.8.3".
22:59:27.654
warning " > @zeit/[email protected]" has incorrect peer dependency "react-dom@^16.8.3".
22:59:31.860
[4/4] Building fresh packages...
22:59:32.052
Done in 17.04s.
22:59:32.073
Detected Next.js version: 10.2.0
22:59:32.075
Running "yarn run build"
22:59:32.418
yarn run v1.22.11
22:59:32.462
$ next build && node .next/server/build-rss.js
22:59:32.887
info - Loaded env from /vercel/path0/.env
22:59:33.514
22:59:33.514

Build error occurred
22:59:33.516
Error:
22:59:33.516
NOTION_TOKEN is missing from env, this will result in an error
22:59:33.516
Make sure to provide one before starting Next.js
22:59:33.516
at warnOrError (/vercel/path0/next.config.js:23:15)
22:59:33.516
at Object. (/vercel/path0/next.config.js:29:3)
22:59:33.517
at Module._compile (internal/modules/cjs/loader.js:1072:14)
22:59:33.517
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
22:59:33.517
at Module.load (internal/modules/cjs/loader.js:937:32)
22:59:33.517
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
22:59:33.517
at Module.require (internal/modules/cjs/loader.js:961:19)
22:59:33.517
at require (internal/modules/cjs/helpers.js:92:18)
22:59:33.517
at loadConfig (/vercel/path0/node_modules/next/dist/next-server/server/config.js:8:72)
22:59:33.517
at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)
22:59:33.533
error Command failed with exit code 1.
22:59:33.533
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
22:59:33.553
Error: Command "yarn run build" exited with 1

Youtube and other embed media support?

Hi, it seems like I can't render embed Youtube video correctly.

error 'NOTION_TOKEN' is not recognized as an internal or external command, operable program or batch file.

C:\Windows\System32\notion-blog>NOTION_TOKEN='2bc970425c03feaafc8ed252b0b7f95f1e0eb122904c66413f5858760149bab4087e5524d07c0748a59169259abf069a9cf4eb64d201e03fa29c02ff30fe650af88fe0e89066bfa38d43246831e9' BLOG_INDEX_ID='20509c6870e74c53a5adff4ce5fa3114' node scripts/create-table.js
'NOTION_TOKEN' is not recognized as an internal or external command,
operable program or batch file.

List of articles disappears from Notion blog after logging out of Notion

Recently I started using Notion Blog.
I am very grateful to this repository for being able to use Notion-created articles as-is as blog posts and run them easily 👍

As the title suggests, when you log out of Notion from your browser, the tokens used in the Notion Blog are no longer available. Therefore, list of articles cannot be obtained on the blog side, and "There are no posts yet" is output.

Therefore, we are responding by getting a new token from Notion, updating the NOTION_TOKEN environment variable and redeploying it.

If you log out of Notion each time, your token will no longer be available and you will not be able to view your articles. How do I view articles when I log out?

The Notion API was recently released on Public, but can you avoid it by using this API?

https://developers.notion.com/