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://github.com/linyows/rotion
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) => {
const block_id = process.env.PAGEID as string
const blocks = await FetchBlocks({ block_id })
return { props: { blocks } }
}
export default function Home({blocks }:
InferGetStaticPropsType<typeof getStaticProps>) {
return <Page blocks={blocks} />
}
This is the components available:
https://developers.notion.com/reference/block
https://developers.notion.com/reference/database
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 | - |
Notion ID is UUIDv4 format: 8-4-4-4-12.
This is the API available: