最近在做許多 Side Project 的時候，發現經常需要一個輕量化的 CMS，除了要有 API 可以讓網站串接之外，還需要有一個非開發者也能輕鬆操作的介面。所以今天來寫一篇極短文挑戰帶大家三分鐘學會把 Notion 的 Database 接進自己的 Next.js（App router）網站中！

建立 Notion Integration

第一步是打開 www.notion.so/my-integrations 這個網站，點擊畫面中的 Create New Integration 按鈕：

然後選擇你想要接入的 Notion Workspace，並幫這個 Integration 取個名字：

點擊 Submit 以後，Integration 就新建成功了！然後點擊 Show 就可以看到我們的 Integration Secret：

比如說我的這個 test 的 Integration Secret 是：

secret_Bvfm44ybETghqyjcDFkDi1ZCypJKEVI0zs1H6IB6nJ9

建立 Notion 資料庫

接下來，隨便在 Notion 裡面開一個頁面，然後在頁面裡面新建一個資料庫，名字和欄位可以按照自己的需求隨便取，比如說我開了一個使用者列表的資料庫，裡面有兩筆使用者資料：

然後點擊這個資料庫右上角的設定按鈕，把我們剛剛的 Integration 連接到這個資料庫：

連接成功以後，我們的 Integration 就有權限可以存取這個資料庫的資料了！只要拿著剛剛的 Integration Secret 就可以從 SDK 中進行請求。

但在請求的時候，我們要填寫資料庫的 ID，我們可以點擊這個頁面的分享按鈕，從複製到的網址裡面找到資料庫 ID：

比如說我複製下來的網址是：

https://www.notion.so/yuanlinlin/f68bbf15ad524f84b42d6ae9e72ee136?v=3d27af91400e4e7fbf47692a7efc1749&pvs=4

先把 ? 後面的部分去掉：

https://www.notion.so/yuanlinlin/f68bbf15ad524f84b42d6ae9e72ee136

再把最後一個 / 前面的部分去掉：

f68bbf15ad524f84b42d6ae9e72ee136

這就是我們的資料庫 ID 了！

從 Next.js 中請求資料

回到你的 Next.js 專案，然後安裝 Notion 的 SDK：

pnpm i @notionhq/client

然後在專案新建一個 .env.local 檔案（如果有了就直接加在檔案最後面）：

NOTION_TOKEN="secret_Bvfm44ybETghqyjcDFkDi1ZCypJKEVI0zs1H6IB6nJ9"
NOTION_DATABASE_ID="f68bbf15ad524f84b42d6ae9e72ee136"

然後在想要使用動態資料的頁面加入 SDK 的請求程式碼，比如說原本的頁面是：

import React from "react";

export default async function Home() {
  return <div>Hi</div>
}

直接把他變成：

import React from "react";

export default async function Home() {

  const notion = new Client({ auth: process.env.NOTION_TOKEN });
  const pages = await notion.databases.query({ database_id: process.env.NOTION_DATABASE_ID! });

  console.log(pages);

  return <div>Hi</div>
}

然後就可以看到 Notion 的資料出現在我們的 log 裡面了：

以上就是把 Notion 資料庫的內容串接到 Next.js 的極簡圖文教學，把資料接進來以後就可以自行根據業務邏輯進行資料的處理和頁面的渲染邏輯啦！

不知道大家有沒有在三分鐘內成功串接，如果這篇文章有幫助到你的話，務必幫我按十個愛心然後留言分享你的看法哦～