notion apiで記事一覧を取得するときに、tagで絞り込みをする方法

1. Notion APIの「search」エンドポイントを使用するために、Notion API Keyを取得します。
2. Notion API Keyを使用して、「search」エンドポイントにアクセスし、タグを指定したクエリを送信します。
3. APIから受け取った結果から、記事の一覧を抽出します。
4. 取得した記事の一覧を、Next.jsアプリケーションのフロントエンドに表示します。

import axios from 'axios';

const getArticlesByTag = async (tag) => {
    try {
        const res = await axios.get(`https://api.notion.com/v3/search`, {
            params: {
                query: `property: tag = ${tag}`,
                filter: {
                    property: 'object',
                    value: 'article'
                }
            },
            headers: {
                'Authorization': `Bearer ${process.env.NOTION_API_KEY}`
            }
        });
        return res.data;
    } catch (error) {
        console.log(error);
    }
}

1. getStaticPropsを使用して、特定のタグで絞り込んだ記事の一覧を取得します。

import axios from 'axios';

export async function getStaticProps({ params }) {
    const res = await axios.get(`https://api.notion.com/v3/search`, {
        params: {
            query: `property: tag = ${params.tag}`,
            filter: {
                property: 'object',
                value: 'article'
            }
        },
        headers: {
            'Authorization': `Bearer ${process.env.NOTION_API_KEY}`
        }
    });
    const articles = res.data;
    return { props: { articles, tag: params.tag } }
}

ここで、getStaticProps関数は、特定のタグの文章を取得するために使用します。

1. getStaticPathsを使用して、生成するページのパスを設定します。

export async function getStaticPaths() {
    // 例えばここでデータベースからタグの一覧を取得し、pathsに入れる
    const tags = ['API', 'Next.js', 'SSG'];
    const paths = tags.map((tag) => `/articles/${tag}`);
    return { paths, fallback: false };
}

ここで、getStaticPaths関数は、生成するページのパスを設定するために使用します。

1. getStaticProps関数で取得した記事の一覧を、Reactコンポーネントで表示します。

import { useEffect, useState } from 'react';
import axios from 'axios';

export default function Article({ articles, tag }) {
    return (
        <div>
            <h1>{tag}タグの記事一覧</h1>
            <ul>
                {articles.results.map((article) => (
                    <li key={article.id}>
                        <a href={article.url}>{article.title}</a>
                    </li>
                ))}
            </ul>
        </div>
    );
}

これで、Next.jsで、特定のタグで絞り込んだ記事の一覧を取得し、SSGを使用して、静的なHTMLを生成して表示することができるようになりました。

注意点として、getStaticPropsは、ビルド時に実行されるため、実行時に変更がある場合は、リビルドが必要になります。

また、getStaticPropsは、ビルド時に実行されるので、Notion API Keyを環境変数として扱うなど、注意が必要です。