Notion
Next.js
TypeScript

Next.js（TypeScript）でNotion APIを使ってみた

Next.jsとTypeScriptを使用して、Notionのデータベースからデータを取得し、表示するシンプルなアプリケーションを作成する方法を紹介します

Next.jsは、Reactをベースにした人気のある静的サイト生成（SSG）およびサーバーサイドレンダリング（SSR）フレームワークです。Notion APIと組み合わせることで、Notionのデータを簡単にWebサイトに統合できます。この記事では、Next.jsとTypeScriptを使用して、Notionのデータベースからデータを取得し、表示するシンプルなアプリケーションを作成する方法を紹介します。

前提条件

  • Node.jsとnpmがインストールされていること
  • NotionアカウントとAPIトークンを持っていること

#1. Next.jsプロジェクトのセットアップ

まず、新しいNext.jsプロジェクトを作成します。

npx create-next-app@latest my-notion-app --typescript
cd my-notion-app

次に、必要なパッケージをインストールします。

npm install axios

#2. Notion APIのセットアップ

Notion APIを使用するために、APIトークンとデータベースIDが必要です。

2.1 APIトークンの取得

  1. Notion Developer Portalにアクセスし、Notionにログインします。
  2. 「New Integration」をクリックして、新しいインテグレーションを作成します。
  3. インテグレーションの名前やアイコンを設定し、「Submit」をクリックします。
  4. 表示される「Internal Integration Token」をコピーします。

2.2 データベースIDの取得

  1. Notionで使用するデータベースのページを開きます。
  2. URLからデータベースIDを取得します。URLはhttps://www.notion.so/{workspace}/{database_id}?v={view_id}の形式になっています。

#3. Notion APIからデータを取得する

プロジェクトのルートディレクトリに .env.local ファイルを作成し、APIトークンとデータベースIDを追加します。

NOTION_API_KEY=your_integration_token
NOTION_DATABASE_ID=your_database_id

#4. Next.jsでNotion APIを呼び出す

4.1 型定義の作成

まず、Notion APIのレスポンスの型定義を作成します。

// types/notion.ts
export interface NotionPage {
  id: string;
  properties: {
    Name: {
      title: [
        {
          text: {
            content: string;
          };
        }
      ];
    };
  };
}

export interface NotionDatabaseResponse {
  results: NotionPage[];
}

4.2 APIルートの作成

/pages/api/notion.ts ファイルを作成し、Notion APIからデータを取得するエンドポイントを設定します。

typescriptコードをコピーする
// pages/api/notion.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import axios from 'axios';
import { NotionDatabaseResponse } from '../../types/notion';

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const { NOTION_API_KEY, NOTION_DATABASE_ID } = process.env;

  try {
    const response = await axios.post<NotionDatabaseResponse>(
      `https://api.notion.com/v1/databases/${NOTION_DATABASE_ID}/query`,
      {},
      {
        headers: {
          Authorization: `Bearer ${NOTION_API_KEY}`,
          'Notion-Version': '2021-08-16',
        },
      }
    );

    res.status(200).json(response.data);
  } catch (error) {
    res.status(500).json({ message: 'Failed to fetch data from Notion API' });
  }
};

4.3 ページコンポーネントの作成

次に、Notion APIから取得したデータを表示するページを作成します。

typescriptコードをコピーする
// pages/index.tsx
import { useEffect, useState } from 'react';
import axios from 'axios';
import { NotionDatabaseResponse, NotionPage } from '../types/notion';

export default function Home() {
  const [data, setData] = useState<NotionPage[] | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get<NotionDatabaseResponse>('/api/notion');
      setData(response.data.results);
    };

    fetchData();
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Notion Database</h1>
      <ul>
        {data.map((page) => (
          <li key={page.id}>{page.properties.Name.title[0].text.content}</li>
        ))}
      </ul>
    </div>
  );
}

#5. アプリケーションの実行

プロジェクトを実行して、Notionデータベースからデータが取得され、表示されることを確認します。

npm run dev

ブラウザで http://localhost:3000 を開き、Notionのデータが表示されることを確認します。

#まとめ

この記事では、Next.jsとTypeScriptを使用してNotion APIを呼び出し、データを取得して表示する方法を紹介しました。これにより、NotionのデータをWebアプリケーションに統合することが容易になり、さまざまな用途に活用できます。さらに詳細な情報や機能については、Notion APIの公式ドキュメントを参照してください。

タグ一覧