嗨大家！今天在串 Notion SDK 時因為想要實作 pagination (分頁) 的關係，才發現在 client-side 呼叫會遇到 CORS 問題。這時候想到可以自己寫個 API Route，然後在後端的 code 呼叫 SDK！這樣就可以避免 CORS 問題了～ 所以今天來講一下怎麼做的！

API Routes 簡介

API Routes 主要是讓我們可以在 Next.js 專案中自己開 API，而且是跑在後端的喔！所以資料庫操作什麼的都很方便，也不會增肥前端的程式包 (bundle size)。
因為之前有寫過一篇 API Routes 的簡介，所以不會再重複了～ 想知道更多可以看看這篇喔！

點我 → #06 No-code 之旅 — 用 Next.js 解決前後端？API Routes 簡介

後端

像這篇提到的，想要用 API Route 需要在 pages/api 資料夾裡新增檔案，例如 blogs.js 然後裡面要 default export 一個 handler function，來處理請求：

// pages/api/blogs.js
import { queryDatabase } from "lib/notion";

export default async function handler(req, res) {
  // 去 query Notion database  
  const resp = await queryDatabase();

  // 用 Next.js 提供的 response helper 回傳 JSON 格式的 `resp`
  res.json(resp);
}

上面的 queryDatabase 是使用 Notion SDK 抓取某 database 的資料：

// lib/notion.js
const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});

export const queryDatabase = async (params) => {
  const response = await notion.databases.query({
    database_id: process.env.NOTION_DATABASE_ID,
    ...params,
  });

  return response;
};

如果想要更了解 Notion SDK，可以看看之前寫的兩篇文章～

• #11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK
• #18 No-code 之旅 — 讀取資料庫來實作部落格 ft. Notion SDK

前端

寫完 API 之後，我們可以在前端的 code 使用了！我自己會想要用 SWR 做資料管理，可是今天的文章先用 fetch API 就好～

const Blogs = () => {
  const [blogs, setBlogs] = useState();
  
  useEffect(() => {
    fetch("/api/blogs").then(d => d.json()).then(d => setBlogs(d));
  }, []);
  
  return (...);
}

所以我們可以用 fetch 直接打到 /api/blogs 這個路徑，然後我們 Next.js 的伺服器端會用 handler function 去處理請求，抓完資料再去回傳 response 到前端在 component 中顯示～ 這樣終於解決原本遇到 CORS 的問題！

小結

今天串資料串的有點痛苦ＸＤ 遇到各種問題，所以比較晚寫文章Ｑ 最後決定用 API Routes 跟 Notion 溝通，之後會再用 SWR 來同步資料。應該是明天的文章喔！當初想要在前後端都跟 Notion 溝通，不只在後端而已，是因為想要做分頁，不然一開始在 getStaticProps 抓完資料其實很足夠了。

大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。

祝大家連假愉快！

晚安 <3