Notionpresso Quick Start Guide

2.1. Installation and Setup

Installing Notionpresso

Install Notionpresso and @notionpresso/cli, a CLI tool for extracting Notion data.

npm install -g @notionpresso/cli
npm install @notionpresso/react

Setting up a Next.js Project

If you don't have a Next.js project, create a new one. Next.js provides optimal performance with static site generation and server-side rendering support.

npx create-next-app my-notion-blog
cd my-notion-blog

Generating a Notion API Key

1. Go to the Notion developer portal (https://developers.notion.com/).
2. Create a new integration.
3. Securely store the generated API key.

2.2. Extracting Notion Data (@notionpresso/cli)

Use the @notionpresso/cli CLI to extract Notion data in JSON format and prepare it for use on your website.

Using the Data Extraction Command

Extract data using the Notion page URL and API key.

npx npresso --page YOUR_PAGE_URL --auth YOUR_API_KEY

@notionpresso/cli Folder Structure and Options

@notionpresso/cli is tailored to the Next.js project structure by default. The extracted data is stored in the following structure:

my-notion-blog/
├── notion-data/
│   ├── page-id-1.json
│   ├── page-id-2.json
│   └── ...
└── public/
    └── images/
        ├── page-id-1/
        │   ├── image1.png
        │   └── image2.jpg
        ├── page-id-2/
        │   └── image1.png
        └── ...

Main options for @notionpresso/cli:

• --dir: Specifies the directory where JSON files will be stored. Default is ./notion-data.
• --image-dir: Specifies the directory where image files will be stored. Default is ./public/images.

For example, if you want to change the storage location:

npx npresso --page YOUR_PAGE_URL --auth YOUR_API_KEY --dir ./data --image-dir ./public/assets/images

If options are not specified, default values are used, which are optimized for the Next.js project structure.

2.3. Rendering Notion Data in React

Render the extracted Notion data using React components. This section covers basic page structure and component usage.

Basic Rendering Example Code

A simple example of rendering Notion data as React components.

import { Notion } from "@notionpresso/react";
import pageData from "./notion-data/your-page-id.json";


function NotionPage() {
return (
<Notion data={pageData}>
<Notion.Cover src={pageData.cover} />
<Notion.Body>
<Notion.Title title={pageData.title} />
<Notion.Blocks blocks={pageData.blocks} />
</Notion.Body>
</Notion>
);
}




export default NotionPage;
export default NotionPage;

Explanation

• The <Notion> component takes Notion data and constructs the page.
• Basic Notion elements like <Cover>, <Title>, <Blocks> can be expressed on the web as they are.

2.4. Creating the First Page with Next.js Integration

Generate dynamic web pages using Next.js and optimize performance using Static Site Generation (SSG).

Creating Next.js Pages and Setting Up Dynamic Routing

Generate each post page with dynamic routing and use getStaticPaths and getStaticProps for static site generation.

// pages/[slug].js
import { Notion } from "@notionpresso/react";
import posts from "../posts";


export async function getStaticPaths() {
const paths = posts.map((post) => ({
params: { slug: post.slug },
}));
return { paths, fallback: false };
}




export async function getStaticProps({ params }) {
const post = posts.find((p) => p.slug === params.slug);
return { props: { post } };
}




export default function PostPage({ post }) {
return (
<Notion>
<Notion.Blocks blocks={post.content.blocks} />
</Notion>
);
}
export default function PostPage({ post }) {
return (
<Notion>
<Notion.Blocks blocks={post.content.blocks} />
</Notion>
);
}

Explanation

• getStaticPaths pre-generates the paths for the posts.
• getStaticProps fetches data for each post and renders it.

2.5. Creating a Blog

This section explains how to set up the overall structure of the blog and how to manage and display each post.

Setting up posts/index.js

Centrally manage blog post data. Organize the metadata and content of each post into an array for use.

// posts/index.js
import post1Content from "../notion-data/post1.json";
import post2Content from "../notion-data/post2.json";


const posts = [
{
slug: "post1",
title: "First Blog Post",
date: "2023-10-01",
description: "Description of the first blog post.",
content: post1Content,
},
{
slug: "post2",
title: "Second Blog Post",
date: "2023-10-05",
description: "Description of the second blog post.",
content: post2Content,
},
];




export default posts;
export default posts;

Using the Data: Blog Main Page

Use the posts array to render a list of posts on the main page.

// pages/index.js
import Link from "next/link";
import posts from "../posts";


export default function Home() {
return (
<div>
<h1>Blog Post List</h1>
<ul>
{posts.map((post) => (
<li key={post.slug}>
<Link href={/${post.slug}}>
<a>{post.title}</a>
</Link>
<p>{post.description}</p>
<small>{post.date}</small>
</li>
))}
</ul>
</div>
);
}
export default function Home() {
return (
<div>
<h1>Blog Post List</h1>
<ul>
{posts.map((post) => (
<li key={post.slug}>
<Link href={/${post.slug}}>
<a>{post.title}</a>
</Link>
<p>{post.description}</p>
<small>{post.date}</small>
</li>
))}
</ul>
</div>
);
}

Creating Individual Post Pages

Each post page is automatically generated through dynamic routing. Posts written in Notion are directly reflected on the website, allowing for easy blog updates.