Get Started

Installation

1npm install notion2nextjs

Advice

The getPage function of the notion2component module cannot be called from the browser. Therefore, you must use a server side rendering (SSR) environment or implement a server that calls data. We recommend using nextjs rather than reactjs. However, because the Notion Template component is a client side rendering (CSR), you must create a CSR component when using nextjs.

Usage

Create a client object by referencing the @notionhq/client document and create an n2c object using that object.

1import { Notion2Component } from 'notion2nextjs' 
2
3const n2c = new Notion2Component({
4  client: notionClient
5})

Use the getPage function of the n2c object to get all blocks of that page.

1const blocks = n2c.getPage('abb07387c63645bbbbf093859db799bf')

Use the NotionTemplate component to render blocks on the screen.

1<NotionTemplate blocks={blocks} />

ReactJS Example

1import { useState, useEffect } from "react";
2import NotionTemplate from 'notion2nextjs/dist/NotionTemplate'
3
4export default function Page() {
5  const [data, setData] = useState([])
6
7  useEffect(() => {
8    fetch('your N2C getPage data server')
9      .then((res) => setData(res.json()))
10  }, []);
11  
12  return <NotionTemplate blocks={data} />
13}

NextJS Example

1// page.jsx
2import { Client } from "@notionhq/client";
3import NotionTemplate from 'notion2nextjs/dist/NotionTemplate'
4import { Notion2Component } from "./notion2Component";
5
6async function getData() {
7  const notion = new Client({
8    auth: process.env.NOTION_SECRET,
9  })
10  const n2c = new Notion2Component({
11    client: notion,
12  })
13  return n2c.getPage('your notion page id')
14}
15
16export default async function Page() {
17  const data = await getData()
18  
19  return <CsrComponent data={data} />
20}

1// csrComponent.jsx
2'use client'
3
4import NotionTemplate from 'notion2nextjs/dist/NotionTemplate'
5
6export default function CsrComponent({data}) {
7  return <NotionTemplate blocks={data} />
8}

Supporting Blocks

Block Type	Supported
Bookmark	✅
Breadcrumb	❌
BulletedListItem	✅
Callout	✅
ChildDatabase	❌
ChildPage	❌
Column	✅
ColumnList	✅
Divider	✅
Embed	❌
Equation	✅
File	✅
Heading_1	✅
Heading_2	✅
Heading_3	✅
Image	✅
LinkPreview	❌
LinkToPage	❌
NumberedListItem	✅
Paragraph	✅
Pdf	❌
Quote	✅
SyncedBlock	❌
Table	✅
TableOfContents	❌
TableRow	✅
Template	❌
ToDo	✅
Toggle	✅
Video	✅