Quick start

Render your first Notion page in a Next.js app.

This renders a Notion page in a Next.js App Router page. notionic works with any React framework that renders on the server; only the caching line is Next.js-specific.

TypeScript

import { Client } from "@notionhq/client"import { NotionRenderer } from "notionic"import { fetchPage } from "notionic/fetch"
const notion = new Client({ auth: process.env.NOTION_TOKEN })
// Rebuild at most once an hour, instead of calling Notion on every visit.export const revalidate = 3600
export default async function Page() {  const { page, blocks } = await fetchPage(notion, "your-page-id")  return (    <article>      <h1>{page.title}</h1>      <NotionRenderer blocks={blocks} />    </article>  )}

The page ID is the 32 characters at the end of the page's URL.

What you get

Every block of the page, nested blocks included, rendered as HTML on the server.
Headings with anchor links. Notion's heading 1 renders as <h2>, since your page title is the <h1>.
Links between Notion pages pointing to notion.so (opens in a new tab). To point them at your own routes, see Linking pages.

Notion's API allows about 3 requests a second on average. Cache rendered pages rather than fetching on every request.