t0m0120

<h1 id="step1.-token%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#step1.-token%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B" aria-hidden="true"></a> Step1. TOKENを取得する</h1>
<p><a href="https://developers.notion.com/docs/getting-started" target="_blank" rel="nofollow noopener noreferrer">https://developers.notion.com/docs/getting-started</a> に従って、下記を取得する。</p>
<ul>
<li>NOTION_TOKEN</li>
<li>NOTION_DATABASE_ID</li>
</ul>
<hr>
<h2 id="1.-%E6%96%B0%E3%81%97%E3%81%84%E3%82%A4%E3%83%B3%E3%83%86%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#1.-%E6%96%B0%E3%81%97%E3%81%84%E3%82%A4%E3%83%B3%E3%83%86%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 1. 新しいインテグレーションを作成</h2>
<p><img src="https://storage.googleapis.com/zenn-user-upload/228e0eb63efe-20220612.png" alt loading="lazy" class="md-img"></p>
<hr>
<h2 id="2.%E3%82%A4%E3%83%B3%E3%83%86%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%A6%E3%80%81token%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#2.%E3%82%A4%E3%83%B3%E3%83%86%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%A6%E3%80%81token%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B" aria-hidden="true"></a> 2.インテグレーションを作成して、Tokenを取得する</h2>
<p><img src="https://storage.googleapis.com/zenn-user-upload/e0ff9d20981e-20220612.png" alt loading="lazy" class="md-img"></p>
<p>Tokenが表示されるのでコピーしておく</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/52a5e5c8733b-20220612.png" alt loading="lazy" class="md-img"></p>


<h1 id="notion%E3%81%A7database%E3%82%92%E4%BD%9C%E3%82%8B">
<a class="header-anchor-link" href="#notion%E3%81%A7database%E3%82%92%E4%BD%9C%E3%82%8B" aria-hidden="true"></a> NotionでDatabaseを作る</h1>
<h2 id="1.-%E6%96%B0%E8%A6%8F%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8B%E3%82%89-%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9-%3E-%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB-%E3%82%92%E9%81%B8%E6%8A%9E">
<a class="header-anchor-link" href="#1.-%E6%96%B0%E8%A6%8F%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8B%E3%82%89-%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9-%3E-%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB-%E3%82%92%E9%81%B8%E6%8A%9E" aria-hidden="true"></a> 1. 新規ページから <code>データベース &gt; テーブル</code> を選択</h2>
<p><img src="https://storage.googleapis.com/zenn-user-upload/8b21a0db08c4-20220612.png" alt loading="lazy" class="md-img"></p>
<hr>
<h2 id="2.-%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#2.-%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" aria-hidden="true"></a> 2. テーブルを作成する</h2>
<p><a href="https://www.notion.so/5b53abc87b284beab0c169c9fb695b4d?v=e4ed5b1a8f2e4e12b6d1ef68fa66e518" target="_blank" rel="nofollow noopener noreferrer">参考テーブル</a>をもとにデータを入れる。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/0952aa659b2f-20220612.png" alt loading="lazy" class="md-img"></p>
<p>日本語ユーザーだと翻訳されているので注意。</p>
<h2 id="3.-database_id%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#3.-database_id%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B" aria-hidden="true"></a> 3. DATABASE_IDを取得する</h2>
<p>URLの下記の部分からIDをコピーしておく</p>
<p><code>https://www.notion.so/ユーザー名/{DATABASE_ID}?v=hogehoge</code></p>


<h1 id="vercel%E3%81%A7%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#vercel%E3%81%A7%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%99%E3%82%8B" aria-hidden="true"></a> Vercelでデプロイする</h1>
<h2 id="git-repository%E3%82%92%E4%BD%9C%E3%82%8B">
<a class="header-anchor-link" href="#git-repository%E3%82%92%E4%BD%9C%E3%82%8B" aria-hidden="true"></a> Git Repositoryを作る</h2>
<p><a href="https://github.com/samuelkraft/notion-blog-nextjs" target="_blank" rel="nofollow noopener noreferrer">https://github.com/samuelkraft/notion-blog-nextjs</a> の Vercel Deploy ボタンを押す</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/07178d041b31-20220612.png" alt loading="lazy" class="md-img"></p>
<h2 id="%E4%BF%9D%E5%AD%98%E3%81%97%E3%81%9Ftoken%E3%81%A8databaseid%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%99%E3%82%8B%E3%80%82">
<a class="header-anchor-link" href="#%E4%BF%9D%E5%AD%98%E3%81%97%E3%81%9Ftoken%E3%81%A8databaseid%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%99%E3%82%8B%E3%80%82" aria-hidden="true"></a> 保存したTokenとDatabaseIDを入力する。</h2>
<p><img src="https://storage.googleapis.com/zenn-user-upload/8dbef5746e72-20220612.png" alt loading="lazy" class="md-img"></p>
<h2 id="deploy%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#deploy%E3%81%99%E3%82%8B" aria-hidden="true"></a> Deployする</h2>
<p><img src="https://storage.googleapis.com/zenn-user-upload/ef62afecb756-20220612.png" alt loading="lazy" class="md-img"></p>


Next.js + Notion Blogを作る

Step1. TOKENを取得する

1. 新しいインテグレーションを作成

2.インテグレーションを作成して、Tokenを取得する

NotionでDatabaseを作る

1. 新規ページから `データベース > テーブル` を選択

2. テーブルを作成する

3. DATABASE_IDを取得する

Vercelでデプロイする

Git Repositoryを作る

保存したTokenとDatabaseIDを入力する。

Deployする