# 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](https://github.com/nublson/notionic/tree/main/examples/starter).

### 1. Create an integration

At [notion.so/profile/integrations](https://www.notion.so/profile/integrations), 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_ID
npm 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>`.