n2zm Blog Template

本ブログテンプレート「n2zm-blog-nextjs」の使い方

TECH
Blog

n2zm-blog-nextjsとは？

n2zm-blog-nextjsはNotionをヘッドレスCMSとして利用したブログのテンプレートです。

Setup

利用するには以下の手順で設定を行います。

  1. テンプレートからリポジトリを作成する

  2. NotionのIntegrationの設定を行う

    NotionのIntegration Dashboardにアクセスし、新しいIntegrationを作成します。

    ここでは、「My Blog」という名前で作成しました。

    作成したIntegrationのSecretを保存しておきます。

    本テンプレートでは、Notionのユーザー情報（名前とアイコン）を利用するため、ユーザー情報の取得を許可します。

    Capabilitiesから、User Capabilitiesのうち「Read user information without email addresses」を選択します。

    参考：公式ドキュメント- Build your first integration -

  3. Notionのテンプレートを複製する

    こちらのNotion のテンプレートを自身のアカウントに複製します。

ページの右端の「・・・」から「Duplicate page」をクリックしてください。


![](/image/9c11ef7d-b429-45aa-92b3-b116ea71adb8)


自身のNotionアカウントに追加するかどうかを問う以下の様なダイアログが出てくるので、「Add to Private」をクリックしてください。


![](/image/3e94832d-3262-4d78-9d61-fd4993ea8dcf)


すると以下のように、ブログ記事管理用のデータベースのテンプレートが複製されます。


![](/image/2f8a8781-4c73-46c2-beee-667ae8578301)

  1. データベースにコネクションの設定をする

    複製したデータベースのページの右上にある「・・・」をクリック、「＋Add connections」から先ほど作成した、Integrationを設定します。

    今回の例ではIntegrationを「My Blog」という名前で作成しましたので、それを選択します。

  1. リポジトリをクローンする

  2. 環境変数を設定する

    次に環境変数を設定します。クローンしたリポジトリのフォルダ直下に .env.sample というファイルがあるので、これを同階層にコピーして .env.local ファイルを作成してください。

    BASE_URL="http://localhost:3000"

# Notion API
NOTION_TOKEN=
NOTION_DATABASE_ID=

    NOTION_TOKEN には作成した、IntegrationのSecretを貼り付けてください。

    NOTION_DATABASE_ID に設定するのは先ほど複製したテンプレートのデータベースのIDです。

    データベースのIDを取得するには、データベースのページの右上の「・・・」から「Copy link」をクリックしてください。

    コピーされたリンクは以下のいずれかの様な形になっています。赤枠で囲っているところがデータベース IDです。

  3. npm i でDependenciesをインストールする

    クローンしたリポジトリのディレクトリをターミナルで開き、 npm i を実行します。

  4. Next.jsを起動する

    npm run dev で開発サーバーを起動します。

← Go home