transitive-bullshit/nextjs-notion-starter-kit

これは何？

主な機能

• 011つのファイルで設定でき、公開Notionページをコンテンツソースとして利用します。
• 02react-notion-xを通じてNotionコンテンツをレンダリングします。
• 03見やすいURLとソーシャルプレビュー画像を自動生成します。
• 04スクロール位置に連動する目次とダークモードを備えています。
• 05オプションのRedisキャッシュと、FathomまたはPostHogのアナリティクスに対応しています。

ユースケース

• Notionで記事を執筆する個人ブログの立ち上げ。
• Notionデータベースから管理するポートフォリオやプロジェクト紹介サイトの構築。
• Notionページを使ったドキュメントや公開ナレッジベースの公開。

クイックスタート

1. 1

   リポジトリをフォークまたはクローンし、site.config.ts で rootNotionPageId を設定します

2. 2

   依存関係をインストールします（Node.js 22 以降が必要です）

   pnpm install
3. 3

   ローカル開発サーバーを起動してテストします

   pnpm dev
4. 4

   Vercel にデプロイします

   pnpm deploy

使う前に知っておきたいこと

• !サイトを動作させるには、ルートの Notion ページを公開する必要があります。
• !ソーシャルプレビュー画像を表示するには、Vercel Authentication を無効にする必要があります。有効のままだと、クローラーに 401 エラーが返されます。
• !外部 Redis インスタンスを設定しないと、プレビュー画像の生成に時間がかかる場合があります。

トピック

よくある質問

nextjs-notion-starter-kit とは？

公開Notionページをデプロイ可能なブログやポートフォリオサイトに変換する、react-notion-xとVercelを基盤としたNext.jsスターターキット。 Next.js Notion Starter Kitは、Notionをコンテンツ管理システムとして利用します。公開NotionページのIDを指定すると、アプリがそのページのコンテンツを、子ページやデータベースも含めてWebサイトとして表示します。Notionブロックのレンダリングにはreact-notion-xを使用し、Vercelへのデプロイを想定して設計されています。

nextjs-notion-starter-kit は無料で使えますか？ライセンスは？

nextjs-notion-starter-kit は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

nextjs-notion-starter-kit は今もメンテナンスされていますか？

活発にメンテナンス中。nextjs-notion-starter-kit の最終コミットは 2026年10月18日 です。

nextjs-notion-starter-kit は何に使えますか？

Notionで記事を執筆する個人ブログの立ち上げ。 Notionデータベースから管理するポートフォリオやプロジェクト紹介サイトの構築。 Notionページを使ったドキュメントや公開ナレッジベースの公開。

nextjs-notion-starter-kit のインストール方法は？

リポジトリをフォークまたはクローンし、site.config.ts で rootNotionPageId を設定します 依存関係をインストールします（Node.js 22 以降が必要です）: pnpm install ローカル開発サーバーを起動してテストします: pnpm dev Vercel にデプロイします: pnpm deploy

nextjs-notion-starter-kit はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/transitive-bullshit/nextjs-notion-starter-kit