🔔

テンプレートを使ってNext.js × Notion のブログサイトを作ってみよう

2023/01/10に公開

先日、自分のアウトプット用のインデックスサイト「Laid Back Code」をNext.jsとNotionで制作しました。
データは基本的にNotionで管理できるので、スマホからも気軽に編集したり投稿できたりするところが気に入っています。

本記事について

Next.js×Notionで検索すると色々と記事が見つかると思いますが、本記事ではとりあえずどんな感じなのか触ってみたいという方向けに、シンプルなテンプレートを使ってブログサイトを実装する方法をご紹介します。（といってもREADME.md通りに進めるだけですが…）

こんなサイトができます↓

Next.jsのテンプレは比較的TypeScriptやtailwindを使ったものが多いですが、今回使うテンプレではJavaScriptメインなのでとっつきやすいと思います！

Next.jsのセットアップ

テンプレのREADME通りに進めます。

データのダウンロード・インストール

下記リポジトリにアクセスしてデータをローカルに落とします。

落とせたらnpm installoryarn installでパッケージをインストール。

環境変数の設定

インストール後すぐにnpm run devしてもエラーになるのでNotionを紐づけます。

プロジェクトルートに.env.sampleというファイルがあるので、これを.env.localにファイル名を変更します。

Notionのセットアップ

Notion側では

データベースページの作成
インテグレーションの作成
データベースページとインテグレーションの紐づけ
を行います。

データベースのページの作成

まずは適当にデータベースでページを作成します。

Notionを初めて使う方や慣れていない方は上記リポジトリで紹介されているページを複製してお使いください↓

今回は上記のページを複製後、一部の記事タイトルのみ変更してみました。

インデグレ―ションの作成

インテグレーションはざっくりいうと、他のツールに接続するための窓口みたいなものです。

こちらからインテグレーションを作成します。

特に難しいことはありませんが、分からないことがあれば下記ページを参照ください。

設定部分はこんな感じにしました。

データベースページとインテグレーションの紐づけ

インテグレーションを作成後、データベースページ右上の「…」ボタンをクリック
↓
コネクトの追加
↓
先ほど作ったインテグレーションを選択（自分の場合はblog-integrationという名前でインテグレーションを作成しました）

これで紐づけは完了です。

Next.jsにNotionを紐づける

Next.jsで作成した.env.localにインテグレーションで取得したトークンとページIDを貼り付けます。

.env.local

NOTION_TOKEN=secret_xxx
NOTION_DATABASE_ID=xxx

NOTION_TOKEN はインデグレ―ションのページで取得できます。

NOTION_DATABASE_ID は用意したデータベースページのURLのユーザー名のあとの32桁をコピペします。（?の前まで！）

ブログ始動！

お疲れ様でした。ここまでできたらnpm run devまたはyarn devで表示されるはずです！

下層ページのNotionのコンテンツも問題なく表示されます。