NotionNextでNotionの内容を独立サイトへ出す仕組み
Notion ワークスペースを高速でカスタマイズ可能な Web サイトに変えます。 Next.js + Notion API で構築されており、マルチプラットフォーム展開が可能で、セルフホステッド サーバーは必要ありません。
ひと目でわかる
- これは何？
- Notionを編集場所として残し、Next.jsとNotion APIでブログ、文書、作品集、製品サイトを公開する構成を、テーマとデプロイ手順から確認します。
- 誰に向いている？
- 向いているのは、Notionで文章や分類を管理し続けながら、公開側だけをサイトとして整えたい個人や小規模チームです。Notion API、Vercel、環境変数の管理を避けたい場合は選びにくいでしょう。
- 商用利用できる？
- できます。MIT は寛容なライセンスで、著作権表示とライセンス表示を残せば、使用・改変・販売が可能です。
- 今もメンテナンスされている？
- されています。最後のコミットは 1 日前です。
- 何の言語で書かれている？
- 主に JavaScript です（GitHub の言語統計による）。
回答はプロジェクトの GitHub データ（最終同期：2026年9月15日）と当サイトの分析に基づくもので、法的助言ではありません。
オープンソース詳細解説
Notionを編集画面、Next.jsを公開面にする
NotionNextはNext.jsとNotion APIで作られたオープンソースのサイトシステムです。記事、カテゴリ、タグ、メニュー、ページを別のCMSへ移さずNotionに置き、NotionNextが訪問、検索、公開に適したウェブサイトとして描画します。READMEはブログ、作品集、知識ベース、ナビゲーションサイト、製品サイトを用途として挙げています。
リポジトリの説明では自前サーバーが不要とされ、READMEの標準的なデプロイ先はVercelです。これは編集データがNotion側にあり、ソースコード、設定、テーマが自分のGitHubリポジトリにある構成です。Notionの権限、API接続、公開サイトの設定を別々に管理する必要がある点は、導入前に整理しておくべき境界です。
用途ごとにテーマを選ぶ26の入口
READMEは26の内蔵テーマを案内しています。個人ブログには`simple`、`hexo`、`nobelium`、`typography`、文書や知識ベースには`gitbook`、`claude`、`thoughtlite`、作品集には`opc`、`proxio`、`starter`、`landing`が例示されています。製品サイトには`commerce`も挙がり、写真や画像中心なら`photo`、`plog`、`magzine`、ナビゲーションサイトなら`nav`が候補です。
テーマは見た目だけでなく、コンテンツの見せ方を決めます。プレビューサイトで実際のレイアウトを見て、手元のNotionページに必要なブロックや画像があるかを照合します。テーマの詳細は`docs/user-guide/themes/`とオンラインカタログに分かれているため、READMEの一覧だけで対応範囲を断定しないことが重要です。
Vercelまでのデプロイ経路
READMEの20分ルートは、テーマのプレビュー、公式Notionテンプレートの複製、GitHubリポジトリのFork、Vercelへのデプロイ、環境変数へのNotionページID入力、ドメインやコメントなどの追加設定という順です。新規利用者には公式ドキュメントの開始ページが案内されています。
Vercelの細かな画面操作はREADME本体に含まれず、ユーザーガイドへのリンクに委ねられています。したがって、デプロイが完了したことだけで内容の同期が確認できたとは扱いません。まずテスト用のNotionページを作り、タイトル、カテゴリ、タグ、画像、メニューの変更がサイトへ反映されることを確認し、その後に独自ドメインを設定する流れが適切です。
Node 22とYarn 1がローカル開発条件
READMEはローカル開発にNode 22とYarn 1を推奨しています。Node 20では`@ai-sdk/google`がNode 22以上を要求するため、現在の依存関係をインストールできないと説明されています。手順は`nvm use || nvm install`、`npm i -g yarn`、`yarn`、`yarn dev`です。
本番ビルドには`yarn build`、静的出力には`yarn export`、文書サイトには`yarn docs:site:dev`と`yarn docs:site:build`が用意されています。Nodeの版とYarnのメジャー版を固定してから、開発サイトでNotion APIの読み取り、テーマの選択、検索対象の生成を順に確認します。READMEはNode 20を使い続ける代替策を示していないため、別版での動作は未確認として扱います。
公開機能とコメント連携の選択
READMEは長期運用向けの機能として独自ドメイン、SEO、Sitemap、RSS、コメント、解析、検索、広告、メール購読を挙げています。コメントにはTwikoo、Giscus、Gitalk、Cusdis、Utterancesが列挙されています。Next.js、Tailwind CSS、react-notion-x、Vercelが主要な技術要素です。
これらは利用可能な選択肢の一覧であり、すべてが初期状態で有効という意味ではありません。特にコメントや解析は、訪問者データの扱いと外部サービスの設定が関係します。採用時は必要な機能を一つずつ有効にし、Notionの非公開内容がページや検索結果に混ざらないことをテスト用アカウントで確認します。
MITライセンスと公開範囲の判断
NotionNextはMITライセンスで、著作権表示を残す条件でソフトウェアの利用、変更、配布、販売などが許可されています。READMEはソフトウェアを現状のまま提供し、保証や責任を置かないと説明します。また、個人の学習と合法的なサイト構築に使う公開リソースであり、違法な内容や行為に利用しないよう記載しています。
ライセンスはサイトの内容やNotionワークスペースの権限設定まで保証しません。コミュニティ、ロードマップ、ガバナンス、貢献ガイドへのリンクは整備されていますが、SLAやセキュリティ監査の記載はREADMEにありません。デプロイ前に、公開するページ、APIキー、コメントと解析の送信先を記録し、サイトの更新後にNotionの下書きが公開されないことを確認する必要があります。
Notionの下書きが公開される境界を試す
検証では、NotionNextの公式テンプレートを複製したテストページに、公開対象のタイトルと非公開の下書きを作ります。Node 22で`yarn`と`yarn dev`を起動し、`NOTION_PAGE_ID`などの環境変数が対象ページを指すことを確認します。タイトル、タグ、メニューを一つずつ変更し、再読み込み後の表示と検索結果を比較します。
その後に`yarn build`を実行し、開発時だけ読める内容が本番ビルドへ混ざらないことを確認します。コメントや解析を有効にする前後で外部送信先を確認し、26テーマのうち採用したテーマ名を記録します。これはNotionの権限とNotionNextの公開処理を同じ問題として扱わないための、プロジェクト固有の確認手順です。
編集部の結論
向いているのは、Notionで文章や分類を管理し続けながら、公開側だけをサイトとして整えたい個人や小規模チームです。Notion API、Vercel、環境変数の管理を避けたい場合は選びにくいでしょう。最初に公式テンプレートを複製し、Node 22で`yarn`と`yarn dev`を実行して、ページIDとテーマが意図どおり反映されるかを確認してください。
コミュニティノート