https://github.com/linyows/rotion
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.
https://github.com/linyows/rotion
hacktoberfest nextjs notion-api react
Last synced: 2 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/linyows/rotion
- Owner: linyows
- License: mit
- Created: 2022-06-19T03:14:41.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2026-03-30T14:54:02.000Z (3 months ago)
- Last Synced: 2026-03-30T16:08:55.673Z (3 months ago)
- Topics: hacktoberfest, nextjs, notion-api, react
- Language: TypeScript
- Homepage: https://rotion.linyo.ws/
- Size: 7.62 MB
- Stars: 45
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.ja.md
- License: LICENSE
Awesome Lists containing this project
README
English | 日本語
**Rotion**は、Notion APIとReactを活用して、Notionのデータベースやページを静的ウェブサイトとして生成するためのコンポーネント＆ツール群です。
Next.jsをはじめとしたReact系フレームワークでの利用を想定していますが、他のフレームワークでも動作します。
画像や必要なファイルはローカルに保存されるため、完全な静的サイト生成が可能です。
公式サイト: https://rotion.linyo.ws
主な特徴
--
- Notion APIからデータベース・ページを取得し、静的サイト用データとして変換
- 画像やPDFなどのファイルもローカル保存
- 豊富なReactコンポーネント（Gallery, Table, List, Page, 各種Blockなど）
- Next.jsなどの静的サイトジェネレーターと親和性が高い
- **Next.js App Router サポート** - `createClientLink` ヘルパー（v2.0.1以降）
- **Next.js Page Router サポート** - 従来のSSGワークフロー
- TypeScript対応
インストール
--
```bash
npm install rotion
```
または
```bash
yarn add rotion
```
使い方
--
### 1. Notion APIのセットアップ
Notionインテグレーションを作成し、APIキーとデータベースIDを取得します：
1. [Notion Integrations](https://www.notion.so/my-integrations) にアクセス
2. 新しいインテグレーションを作成
3. インテグレーショントークンをコピー
4. Notionページ/データベースをインテグレーションと共有
5. ページ/データベースIDをURLからコピー
### 2. データの取得
`rotion` から提供されるAPIを使ってNotionからデータを取得します：
```ts
import { FetchDatabase, FetchBlocks, FetchPage } from 'rotion'
// データベースを取得
const db = await FetchDatabase({ database_id: 'YOUR_DATABASE_ID' })
// ページブロックを取得
const blocks = await FetchBlocks({ block_id: 'YOUR_PAGE_ID' })
// ページ情報を取得
const page = await FetchPage({ page_id: 'YOUR_PAGE_ID' })
```
### 3. Reactコンポーネントで表示
#### Next.js App Router (v15+)
Next.js App Router では、`createClientLink` ヘルパーのセットアップが必要です：
**ステップ1:** `app/lib/rotion.ts` を作成：
```tsx
'use client'
import { createClientLink } from 'rotion/ui'
import NextLink from 'next/link'
export const ClientLink = createClientLink(NextLink)
```
**ステップ2:** Server Component で使用：
```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
Page Router では、Next.js の Link を直接使用できます：
```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
}
```
#### データベースビュー
Notionデータベースをさまざまな形式で表示：
```tsx
import { Gallery, Table, List, Calendar } from 'rotion/ui'
import { FetchDatabase } from 'rotion'
const db = await FetchDatabase({ database_id: 'YOUR_DATABASE_ID' })
// ギャラリービュー
// テーブルビュー
// リストビュー
// カレンダービュー
```
##### Calendar オプション
カレンダービューは月単位のグリッドを描画します。`start` と `end` を持つ複数日のイベントは、対象のセルにまたがる1本の帯としてレンダリングされ、週境界では帯が分割されて続きが描かれます。
```tsx
```
主なエクスポート
--
### データ取得用関数（`rotion` から）
- `FetchDatabase` - Notionデータベースの取得とキャッシュ
- `FetchBlocks` - ページブロックの取得とキャッシュ
- `FetchPage` - ページ情報の取得
- `FetchBreadcrumbs` - パンくずリスト情報の取得
### UIコンポーネント（`rotion/ui` から）
**データベースビュー:**
- `Gallery` - ギャラリービュー
- `Table` - テーブルビュー
- `List` - リストビュー
- `Calendar` - 月単位のカレンダービュー（指定したdateプロパティに従って予定を配置）
**ページとブロック:**
- `Page` - Notionページ全体を表示
- 各種Blockコンポーネント（TextBlock, ImageBlock, CodeBlock, CalloutBlock など）
**ユーティリティ:**
- `Icon` - Notionアイコンの表示
- `RichText` - Notionリッチテキストの表示
- `Checkbox` - チェックボックスの表示
- `createClientLink` - Next.js App Router用ヘルパー（v2.0.1以降）
サンプル
--
`examples/` ディレクトリには、Notionデータベース連携を実演する完全なサンプルが含まれています。
### データベースのセットアップ
すべてのサンプルは、以下のプロパティを持つNotionデータベースが必要です：
| プロパティ名 | プロパティ型 |
|------------|-------------|
| Title | `title` |
| Tags | `multi_select`|
| Date | `date` |
### [nextjs-approuter](./examples/nextjs-approuter)
データベース対応のNext.js App Routerサンプル：
- インデックスページにデータベーステーブルビュー
- 個別記事用の動的 `[id]` ルート
- `generateStaticParams` を使ったServer Components
- CSS Modulesによるスタイリング
```bash
cd examples/nextjs-approuter
cp .env.example .env.local
# NOTION_TOKENとNOTION_DATABASE_IDを設定
npm install
npm run dev
```
### [nextjs-pagerouter](./examples/nextjs-pagerouter)
データベース対応のNext.js Pages Routerサンプル：
- `getStaticProps` を使ったデータベーステーブルビュー
- `getStaticPaths` による動的 `[id]` ルート
- 従来のSSGワークフロー
```bash
cd examples/nextjs-pagerouter
cp .env.example .env.local
# NOTION_TOKENとNOTION_DATABASE_IDを設定
npm install
npm run dev
```
### [astro](./examples/astro)
データベース対応のAstroサンプル：
- `.astro` ファイルでのデータベーステーブルビュー
- `getStaticPaths` による動的ルート
- `client:load` によるReactコンポーネント
```bash
cd examples/astro
cp .env.example .env
# NOTION_TOKENとNOTION_DATABASE_IDを設定
npm install
npm run dev
```
各サンプルのデモ内容：
- 3つのプロパティすべてを表示するデータベーステーブルビュー
- 完全なコンテンツを持つ個別記事ページ
- データベースと記事ビュー間のナビゲーション
スクリプト
--
- `npm run build` - ビルド
- `npm run test` - テスト
- `npm run story` - Storybookの起動
必要な環境
--
- Node.js 18以上推奨
- React 17、18、または19
- Next.js 13以上（App Router機能を使う場合はNext.js 15以上推奨）
ライセンス
--
MIT
作者
--
[@linyows](https://github.com/linyows)