Notion API と Next を接続する

Next.js

2022.12.12 2022.12.09

インテグレーションを作成する
Next 側の設定

インテグレーションを作成する

Start building with the Notion API

Connect Notion pages and databases to the tools you use every day, creating powerful workflows.

シークレットキーをコピーする

Next 側の設定

パッケージをインストール

npm install @notionhq/client

GitHub - makenotion/notion-sdk-js: Official Notion JavaScript Client

Official Notion JavaScript Client. Contribute to makenotion/notion-sdk-js development by creating an account on GitHub.

envファイルの設定

.envファイルは下記

id は、ドメインをクエリパラメータの間の文字列。

NOTION_KEY=secret_nX*****
NOTION_DATABASE_ID=******

インスタンス化

import { Client } from "@notionhq/client";

const notion = new Client({ auth: process.env.NOTION_KEY as string });
const DATABASE_ID = process.env.NOTION_DATABASE_ID as string;

fetch 関数を実装する

export const fetchPages = async () => {
  return await notion.databases.query({
    database_id: DATABASE_ID,
  });
};