getting-started > クイックスタートガイド
ノーションプレッソ クイックスタートガイド
2.1. インストールとセットアップ
ノーションプレッソのインストール
ノーションプレッソとノーションデータを抽出するCLIツールである@notionpresso/cliをインストールします。
npm install -g @notionpresso/cli
npm install @notionpresso/react
Next.js プロジェクトの設定
Next.js プロジェクトがない場合は新しく作成します。Next.jsは静的サイト生成とサーバーサイドレンダリングをサポートし、最高のパフォーマンスを提供します。
npx create-next-app my-notion-blog
cd my-notion-blog
Notion API キーの生成
- Notion 開発者ポータル(https://developers.notion.com/)にアクセスします。
- 新しい統合(integration)を作成します。
- 生成されたAPIキーを安全に保管します。
2.2. Notion データの抽出 (@notionpresso/cli)
@notionpresso/cli CLIを使用してNotionデータをJSON形式で抽出し、これをウェブサイトに使用できるように準備します。
データの抽出コマンドの使用方法
NotionページURLとAPIキーを使用してデータを抽出します。
npx npresso --page YOUR_PAGE_URL --auth YOUR_API_KEY
@notionpresso/cli フォルダの構造とオプション
@notionpresso/cliは、デフォルトでNext.jsプロジェクトの構造に合わせて設定されています。抽出されたデータは次のような構造で保存されます:
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
└── ...
@notionpresso/cliの主なオプション:
--dir
: JSONファイルが保存されるディレクトリを指定します。デフォルトは./notion-data
です。--image-dir
: 画像ファイルが保存されるディレクトリを指定します。デフォルトは./public/images
です。
例えば、保存場所を変更したい場合は、次のように使用できます:
npx npresso --page YOUR_PAGE_URL --auth YOUR_API_KEY --dir ./data --image-dir ./public/assets/images
オプションを指定しない場合、デフォルト値が使用され、これはNext.jsプロジェクトの構造に最適化されています。
2.3. ReactでNotionデータのレンダリング
抽出されたNotionデータをReactコンポーネントを使用してレンダリングします。このステップでは、基本的なページ構造とコンポーネントの使用方法について説明します。
基本的なレンダリングの例
NotionデータをReactコンポーネントでレンダリングする簡単な例です。
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;
説明
<Notion>
コンポーネントは、Notionデータを受け取り、ページを構成します。<Cover>
,<Title>
,<Blocks>
など、Notionの基本的な要素をWebで表現できます。
2.4. Next.jsとの統合による最初のページの作成
Next.jsを使用して動的なWebページを作成し、静的サイト生成(SSG)を利用してパフォーマンスを最適化します。
Next.jsページの作成と動的ルーティングの設定
各ポストページを動的ルーティングで作成し、静的サイト生成のためにgetStaticPaths
とgetStaticProps
を使用します。
// 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>
);
}
説明
getStaticPaths
は、ポストのパスを事前に作成します。getStaticProps
は、各ポストのデータを受け取り、レンダリングします。
2.5. ブログの作成
このセクションでは、ブログの全体構造を設定し、各ポストをどのように管理し、表示するかについて説明します。
posts/index.jsの設定
ブログのポストデータを中央で管理します。各ポストのメタデータとコンテンツを配列に整理して使用します。
// posts/index.js
import post1Content from "../notion-data/post1.json";
import post2Content from "../notion-data/post2.json";
const posts = [
{
slug: "post1",
title: "最初のブログポスト",
date: "2023-10-01",
description: "最初のブログポストの説明です。",
content: post1Content,
},
{
slug: "post2",
title: "2番目のブログポスト",
date: "2023-10-05",
description: "2番目のブログポストの説明です。",
content: post2Content,
},
];
export default posts;
データの使用: ブログのメインページ
posts
配列を使用して、メインページでポストのリストをレンダリングします。
// pages/index.js
import Link from "next/link";
import posts from "../posts";
export default function Home() {
return (
<div>
<h1>ブログポストリスト</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>
);
}
個別のポストページの作成
各ポストページは、動的ルーティングを使用して自動的に作成されます。Notionで作成された記事がWebサイトに反映され、ブログを簡単に更新できます。