#24 No-code 之旅 — 在 Next.js 专案中实作 API

嗨大家！今天在串 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