Get Started

Installation

npm 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.

import { Notion2Component } from 'notion2nextjs' 

const n2c = new Notion2Component({
  client: notionClient
})

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

const blocks = n2c.getPage('abb07387c63645bbbbf093859db799bf')

Use the NotionTemplate component to render blocks on the screen.

<NotionTemplate blocks={blocks} />

ReactJS Example

import { useState, useEffect } from "react";
import NotionTemplate from 'notion2nextjs/dist/NotionTemplate'

export default function Page() {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch('your N2C getPage data server')
      .then((res) => setData(res.json()))
  }, []);
  
  return <NotionTemplate blocks={data} />
}

NextJS Example

// page.jsx
import { Client } from "@notionhq/client";
import NotionTemplate from 'notion2nextjs/dist/NotionTemplate'
import { Notion2Component } from "./notion2Component";

async function getData() {
  const notion = new Client({
    auth: process.env.NOTION_SECRET,
  })
  const n2c = new Notion2Component({
    client: notion,
  })
  return n2c.getPage('your notion page id')
}

export default async function Page() {
  const data = await getData()
  
  return <CsrComponent data={data} />
}

// csrComponent.jsx
'use client'

import NotionTemplate from 'notion2nextjs/dist/NotionTemplate'

export default function CsrComponent({data}) {
  return <NotionTemplate blocks={data} />
}

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 | ✅ |