Notion Presso

ドキュメントチュートリアル貢献するショーケースブログギットハブ
GithubXDiscord

getting-started > プロジェクト紹介

Notionpressoプロジェクト紹介

Notionpressoとは？

Notionpressoは、Notionの強力なコンテンツ作成機能をウェブサイトに簡単に取り込むことができるツールです。このライブラリを使用すると、Notionで作成したコンテンツをそのままReactベースのウェブサイトでレンダリングすることができます。開発者には素早く結果を生み出せるツールとなり、コンテンツ作成者には便利な管理ツールとなる、まさに「開発者と作成者の両方のためのマジックポーション」のような存在です。✨

主な機能と提供する価値

🛠️ NotionデータのReactレンダリング

Notionで作成した文章、画像、リスト、コードブロックなど、様々なコンテンツをReactコンポーネントに簡単に変換できます。以下のような構造でNotionページがウェブで生まれ変わります：

import { Notion, type NotionPageData } from 'Notionpresso';

interface NotionPageProps {
  pageData: NotionPageData;
}

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

この例では、NotionPageData 型はNotionページのデータ構造を定義します。これにより、タイプスクリプトの型チェック機能を利用して、より安定したコードを作成できます。

🎨 カスタマイズの自由

シーエスエスだけをいじることで、簡単にテーマを変更したり、基本提供されているコンポーネントを部分的に変更して、必要な部分だけをカスタマイズできます。さらに、完全に新しいコンポーネントを作成して、Notionpressoに組み込むことも可能です。コードを扱う開発者には無限の可能性を提供します。

🚀 迅速なサイト構築

シーエルアイを使用して、Notionデータを簡単に抽出し、ネクストジェーエスと同様のフレームワークを使用して、迅速に静的サイトを構築できます。いくつかのコマンドだけでサイトを構築するプロセスは、テキストから直接ウェブサイトが完成するような感覚を与えます。

npx npresso --page YOUR_PAGE_URL --auth YOUR_API_KEY

シーエルアイを実行すると、以下のようなフォルダ構造でNotionデータが抽出されます：

my-notion-project/
├── notion-data/
│   ├── page-id-1.json
│   ├── page-id-2.json
│   └── ...
└── public/
    └── notion-dadta/
        ├── page-id-1/
        │   ├── image1.png
        │   └── image2.jpg
        ├── page-id-2/
        │   └── image1.png
        └── ...
  • notion-data/: 各Notionページの内容がJSON形式で保存されます。ファイル名はページのスラッグに基づいて生成されます。
  • public/notion-data/: Notionページで使用された画像は、各ページごとに分類されて保存されます。

このように抽出されたデータは、Notionpressoコンポーネントと簡単に連携でき、Notionのコンテンツを迅速にウェブサイトに変換できます。JSONファイルの内容をReactコンポーネントに渡すだけで、Notionページの構造とスタイルがそのままウェブサイトに反映されます。

ターゲット利用者とそれらの活用可能性

開発者

Notionで作成したコンテンツをウェブサイトに簡単にレンダリングし、カスタマイズできる自由が提供されます。迅速にウェブサイトを構築したい場合や、商用サービスの限界を超えて、望むスタイルにグラデーションしたい場合、Notionpressoが答えです。

デザイナーとクリエイター

Notionで作成したコンテンツを直接ウェブに反映できるため、デザインの一貫性を維持しながら、迅速にコンテンツを更新できます。

活用可能性の例

  • 個人のブログ: Notionで簡単に記事を作成し、自動的にウェブサイトに反映されます。
  • 会社の紹介と採用ページ: Notionを活用して、会社のプロフィールや採用情報を迅速に更新できます。
  • ポートフォリオサイト: プロジェクトと作業物を簡単に更新できるため、ポートフォリオの管理が一層楽になります。

Notionpressoを選択する理由

  1. 開発者中心のカスタマイズ: 他の商用サービスでは、手の届かない細かい部分まで修正できます。コードを通しての無限の可能性、これがNotionpressoの魅力です。

  2. オープンソースの自由: すべてが透明であり、各自の手で直接操作できます。必要に応じてコードを修正し、プロジェクトを自分のサーバーでセルフホスティングできるため、コストの負担もありません。

  3. 迅速な結果と高い効率性: Notionでコンテンツを作成し、簡単な設定だけでウェブサイトで直接使用できるため、コンテンツ作成と配布のプロセスが一層簡素化されます。

Notionpressoは、Notionのページを魅力的なウェブサイトに変換するための橋渡しをします。これで、複雑な設定は終わり、Notionから直接開始してみましょう！

クイックスタートガイド