This is react components that uses the notion API to display the notion's database and page.
npm install rotionEnglish | 日本語
Rotion is a set of components and tools that utilize the Notion API and React to generate a static website from your Notion databases and pages.
It is designed primarily for use with Next.js (or other React frameworks) and stores images and other files locally, so that you can build a fully static site.
Official site: https://rotion.linyo.ws
Features
--
- Fetch and convert Notion databases and pages into static site data via the Notion API.
- Local storage of images, PDFs, and other files.
- Rich React components (Gallery, Table, List, Page, and various Blocks).
- Compatible with static site generators such as Next.js.
- Next.js App Router support with createClientLink helper (v2.0.1+).
- Next.js Page Router support for traditional SSG workflows.
- TypeScript support.
Installation
--
``bash`
npm install rotion
or
`bash`
yarn add rotion
Usage
--
Create a Notion integration and obtain your API key and database ID:
1. Go to Notion Integrations
2. Create a new integration
3. Copy the integration token
4. Share your Notion pages/databases with the integration
5. Copy the page/database IDs from their URLs
Use the APIs under rotion to fetch data from Notion:
`ts
import { FetchDatabase, FetchBlocks, FetchPage } from 'rotion'
// Fetch a database
const db = await FetchDatabase({ database_id: 'YOUR_DATABASE_ID' })
// Fetch page blocks
const blocks = await FetchBlocks({ block_id: 'YOUR_PAGE_ID' })
// Fetch page information
const page = await FetchPage({ page_id: 'YOUR_PAGE_ID' })
`
#### Next.js App Router (v15+)
For Next.js App Router, you need to set up the createClientLink helper:
Step 1: Create app/lib/rotion.ts:`tsx
'use client'
import { createClientLink } from 'rotion/ui'
import NextLink from 'next/link'
export const ClientLink = createClientLink(NextLink)
`
Step 2: Use in your Server Components:
`tsx
// app/page.tsx
import { Page } from 'rotion/ui'
import { FetchBlocks } from 'rotion'
import { ClientLink } from './lib/rotion'
import type { Link } from 'rotion/ui'
export default async function MyPage() {
const blocks = await FetchBlocks({ block_id: 'YOUR_PAGE_ID' })
return
}
`
#### Next.js Page Router
For Page Router, you can use Next.js Link directly:
`tsx
// pages/index.tsx
import type { GetStaticProps } from 'next'
import { Page } from 'rotion/ui'
import { FetchBlocks } from 'rotion'
import NextLink from 'next/link'
export const getStaticProps: GetStaticProps = async () => {
const blocks = await FetchBlocks({ block_id: 'YOUR_PAGE_ID' })
return { props: { blocks } }
}
export default function MyPage({ blocks }) {
return
}
`
#### Database Views
Display Notion databases in different formats:
`tsx
import { Gallery, Table, List } from 'rotion/ui'
import { FetchDatabase } from 'rotion'
const db = await FetchDatabase({ database_id: 'YOUR_DATABASE_ID' })
// Gallery view
// Table view
// List view
`
Main Exports
--
- FetchDatabase – Fetches and caches a Notion databaseFetchBlocks
- – Fetches and caches page blocksFetchPage
- – Fetches page informationFetchBreadcrumbs
- – Fetches breadcrumb information
Database Views:
- Gallery – Gallery view for databasesTable
- – Table view for databasesList
- – List view for databases
Page & Blocks:
- Page – Renders a complete Notion page
- Various Block components (TextBlock, ImageBlock, CodeBlock, CalloutBlock, etc.)
Utilities:
- Icon – Renders Notion iconsRichText
- – Renders Notion rich textCheckbox
- – Renders checkboxescreateClientLink
- – Helper for Next.js App Router (v2.0.1+)
Examples
--
The examples/ directory contains complete working examples demonstrating Notion database integration.
All examples require a Notion database with the following properties:
| Property Name | Property Type |
|--------------|---------------|
| Title | title |multi_select
| Tags | |date
| Date | |
routes for individual articles
- Server Components with generateStaticParams
- CSS Modules for styling`bash
cd examples/nextjs-approuter
cp .env.example .env.local
Add your NOTION_TOKEN and NOTION_DATABASE_ID
npm install
npm run dev
`$3
Next.js Pages Router example with database support:
- Database table view using getStaticProps
- Dynamic [id] routes with getStaticPaths
- Traditional SSG workflow`bash
cd examples/nextjs-pagerouter
cp .env.example .env.local
Add your NOTION_TOKEN and NOTION_DATABASE_ID
npm install
npm run dev
`$3
Astro example with database support:
- Database table view in .astro files
- Dynamic routes with getStaticPaths
- React components with client:load`bash
cd examples/astro
cp .env.example .env
Add your NOTION_TOKEN and NOTION_DATABASE_ID
npm install
npm run dev
`Each example demonstrates:
- Database table view displaying all three properties
- Individual article pages with full content
- Navigation between database and article views
Scripts
--
-
npm run build – Build.
- npm run test – Run tests.
- npm run story` – Launch Storybook.Requirements
--
- Node.js 18 or later (recommended)
- React 17, 18, or 19
- Next.js 13+ (for App Router features, Next.js 15+ recommended)
License
--
MIT
Author
--