【実装】Notion APIでブログシステムを構築する（Next.js 13 App Router × SDK v5）

npm install @notionhq/client

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

const notion = new Client({ auth: process.env.NOTION_API_KEY });

export const getList = async () => {
  const allPages = [];
  let cursor;
  do {
    const response = await notion.dataSources.query({
      data_source_id: DATABASE_ID,
      start_cursor: cursor,
      page_size: 100,
      filter: {
        property: 'Status',
        select: { equals: 'Published' },
      },
      sorts: [{
        property: 'Created',
        direction: 'descending',
      }],
    });
    allPages.push(...response.results);
    cursor = response.has_more ? response.next_cursor : undefined;
  } while (cursor);

  const contents = await Promise.all(
    allPages.map(page => pageToBlog(page, false))
  );
  return { contents, totalCount: contents.length };
};

async function blocksToMarkdown(blockId: string): Promise<string> {
  const blocks = [];
  let cursor;
  do {
    const response = await notion.blocks.children.list({
      block_id: blockId,
      start_cursor: cursor,
      page_size: 100,
    });
    blocks.push(...response.results);
    cursor = response.has_more ? response.next_cursor : undefined;
  } while (cursor);

  const lines = [];
  for (const block of blocks) {
    switch (block.type) {
      case 'heading_1':
        lines.push('# ' + richTextToPlain(block.heading_1.rich_text));
        break;
      case 'heading_2':
        lines.push('## ' + richTextToPlain(block.heading_2.rich_text));
        break;
      case 'paragraph':
        lines.push(richTextToMarkdown(block.paragraph.rich_text));
        break;
      case 'code':
        lines.push('```' + block.code.language + '\n' + richTextToPlain(block.code.rich_text) + '\n```');
        break;
      case 'image':
        const url = block.image.type === 'external'
          ? block.image.external.url
          : block.image.file.url;
        lines.push('![](' + url + ')');
        break;
      // ... 他のブロックタイプ
    }
    lines.push('');
  }
  return lines.join('\n');
}

function richTextToMarkdown(richText) {
  return richText.map(t => {
    let text = t.plain_text;
    if (t.annotations?.bold) text = '**' + text + '**';
    if (t.annotations?.italic) text = '*' + text + '*';
    if (t.annotations?.code) text = '`' + text + '`';
    if (t.href) text = '[' + text + '](' + t.href + ')';
    return text;
  }).join('');
}

export const revalidate = 3600; // 1時間キャッシュ
export const dynamicParams = true;

export async function generateStaticParams() {
  return []; // ビルド時には生成しない
}

import { cache } from 'react';

export const getList = cache(async () => {
  // ... API呼び出し
  return result;
});

export const getCategoryList = async () => {
  const db = await notion.dataSources.retrieve({
    data_source_id: DATABASE_ID
  });
  const options = db.properties.Category?.select?.options || [];
  return {
    contents: options.map(opt => ({
      id: encodeURIComponent(opt.name.toLowerCase()),
      name: opt.name
    }))
  };
};