GithubXDiscord

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 キーの生成

  1. Notion 開発者ポータル(https://developers.notion.com/)にアクセスします。
  2. 新しい統合(integration)を作成します。
  3. 生成された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ページの作成と動的ルーティングの設定

各ポストページを動的ルーティングで作成し、静的サイト生成のためにgetStaticPathsgetStaticPropsを使用します。

// 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サイトに反映され、ブログを簡単に更新できます。