Rotion makes it easy to generate a Static Website using React and the Notion API. Therefore, images and other necessary files are stored locally. Basically, it is designed to use Next.js, but it will work with other frameworks as well. https://www.npmjs.com/package/rotion

Usage

Use API calls and components together. This is a example for page component:

import type { GetStaticProps, InferGetStaticPropsType } from 'next'
import { FetchBlocks, ListBlockChildrenResponseEx } from 'rotion'
import { Page } from 'rotion/ui'

type Props = { blocks: ListBlockChildrenResponseEx }

export const getStaticProps: GetStaticProps<Props> = async (context) => {
  // The block_id specifies the page ID.
  // The Notion page ID is the 32 alpha-numeric characters found at the end of the page URI.
  const blocks = await FetchBlocks({ block_id: process.env.PAGE_ID as string })
  return { props: { blocks } }
}

export default function Home ({ blocks }: InferGetStaticPropsType<typeof getStaticProps>) {
  return <Page blocks={blocks} />
}

When using the Table Component, it's like this:

import type { GetStaticProps, InferGetStaticPropsType } from 'next'
import { FetchDatabase, FetchDatabaseRes } from 'rotion'
import { Table } from 'rotion/ui'

type Props = { db: FetchDatabaseRes }

export const getStaticProps: GetStaticProps<Props> = async (context) => {
  // The database_id specifies the database ID.
  // The Notion database ID is the 32 alpha-numeric characters found at the end of the page URI.
  const db = await FetchDatabase({ database_id: process.env.DB_ID as string })
  return { props: { db } }
}

export default function Home ({ db }: InferGetStaticPropsType<typeof getStaticProps>) {
  return <Table keys={['Name', 'Tags', 'Date']} db={db} />
}

Supported Components

This is the components available:

Blocks

https://developers.notion.com/reference/block

Blocks are used as components of Page Components. So, it's not common to call them directly.

Database

https://developers.notion.com/reference/database

List view

Table view

Gallery view

Calendar view (not yet)

Timeline view (not yet)

Environment variables

Set the token for Notion as environment variable. List of all environment variables:

Env name	Description	Default
NOTION_TOKEN *required	Read permission is required in notion's credentials	-
ROTION_CACHEDIR	Cache directory name	.cache
ROTION_DOCROOT	Web server root directory	public
ROTION_IMAGEDIR	Web server image directory	images
ROTION_INCREMENTAL_CACHE	Enable incremental cache	false
ROTION_WAITTIME	milliseconds to wait right after api request due to ratelimit	0
ROTION_LIMITED_WAITTIME	milliseconds to wait before backoff after ratelimit limit	60sec
ROTION_CACHE_AVAILABLE_DURATION	Cache file available duration in milliseconds	120sec
ROTION_WEBP_QUALITY	Quality for WebP converting	95
ROTION_DEBUG	Logging level to debug	-
GOOGLEMAP_KEY	For Google Map Embed API	-
ROTION_MAX_REDIRECTS	The maximum number of redirects when making an external HTTP request	5
ROTION_UA	The user agent name when making an external HTTP request	rotion/<version>

Notion ID is UUIDv4 format: 8-4-4-4-12.