English | 日本語

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

npm install rotion

or

yarn add rotion

Usage

1. Set Up Notion API

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

2. Export Data

Use the APIs under rotion to fetch data from Notion:

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' })

3. Render with React Components

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:

'use client'

import { createClientLink } from 'rotion/ui'
import NextLink from 'next/link'

export const ClientLink = createClientLink(NextLink)

Step 2: Use in your Server Components:

// 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 <Page blocks={blocks} link={ClientLink as Link} />
}

Next.js Page Router

For Page Router, you can use Next.js Link directly:

// 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 <Page blocks={blocks} link={NextLink} />
}

Database Views

Display Notion databases in different formats:

import { Gallery, Table, List } from 'rotion/ui'
import { FetchDatabase } from 'rotion'

const db = await FetchDatabase({ database_id: 'YOUR_DATABASE_ID' })

// Gallery view
<Gallery db={db} keys={['Name', 'Description', 'Image']} />

// Table view
<Table db={db} keys={['Name', 'Status', 'Date']} />

// List view
<List db={db} keys={['Name', 'Tags']} />

Main Exports

Data Fetching Functions (from rotion)

• FetchDatabase – Fetches and caches a Notion database
• FetchBlocks – Fetches and caches page blocks
• FetchPage – Fetches page information
• FetchBreadcrumbs – Fetches breadcrumb information

UI Components (from rotion/ui)

Database Views:

• Gallery – Gallery view for databases
• Table – Table view for databases
• List – List view for databases

Page & Blocks:

• Page – Renders a complete Notion page
• Various Block components (TextBlock, ImageBlock, CodeBlock, CalloutBlock, etc.)

Utilities:

• Icon – Renders Notion icons
• RichText – Renders Notion rich text
• Checkbox – Renders checkboxes
• createClientLink – Helper for Next.js App Router (v2.0.1+)

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

@linyows