Build a site from a Notion database

Start a blog or docs site from a Notion database with the notionic starter template.

The fastest way to a site built from Notion is the starter template, a Next.js app that lists the pages of a Notion database and renders each one with notionic and shadcn/ui.

Bash

npx create-next-app@latest --example https://github.com/nublson/notionic/tree/main/examples/starter my-site

Or deploy it to Vercel in one step with the Deploy with Vercel button in the starter's README (opens in a new tab).

1. Create an integration

At notion.so/profile/integrations (opens in a new tab), create an Internal integration with Read content, and copy its secret (ntn_…). That's NOTION_TOKEN.

2. Create the database

Make a full-page database with these properties (names are case-sensitive):

Property	Type	Used for
Name	Title	The page title
Slug	Text	The URL: `/<slug>`
Published	Checkbox	Only checked pages appear
Description	Text	The list and the meta description
Date	Date	Shown on the page; newest first

Share it with the integration (••• → Connections). Its ID, NOTION_DATABASE_ID, is the 32 characters before ?v= in its URL.

3. Run it

Bash

cp .env.example .env.local   # fill in NOTION_TOKEN and NOTION_DATABASE_IDnpm run dev

How it works

lib/notion.ts queries the database for published pages with dataSources.query, and loads a page with fetchPage from notionic/fetch.
app/[slug]/page.tsx renders it with NotionRenderer, passing the registry components (components), pageHref so links between posts stay on the site, and transformFileUrl so uploaded files go through a route that re-signs Notion's expiring URLs.
Pages rebuild at most once an hour. To refresh right away, point a Notion webhook at /api/notion/revalidate (see the README).

To change how a block looks, edit its component in components/, or add more from the registry with npx shadcn@latest add @notionic/<name>.