既存の Astro プロジェクトに notro を追加する

notro-tail テンプレートを使わず、既存の Astro プロジェクトへ notro パッケージだけを組み込む手順を解説します。

インストール

npm install notro

astro.config.mjs の設定

notro() インテグレーションを追加します。これにより @astrojs/mdx が自動登録され、Notion ブロックの MDX レンダリングが有効になります。

// astro.config.mjs
import { defineConfig } from 'astro/config';
import { notro } from 'notro/integration';

export default defineConfig({
  integrations: [notro()],
});

content.config.ts の設定

import { defineCollection } from 'astro:content';
import { loader, notroProperties, pageWithMarkdownSchema } from 'notro';
import { z } from 'zod';

const posts = defineCollection({
  loader: loader({
    queryParameters: {
      data_source_id: import.meta.env.NOTION_DATASOURCE_ID,
      filter: { property: 'Public', checkbox: { equals: true } },
    },
    clientOptions: { auth: import.meta.env.NOTION_TOKEN },
  }),
  schema: pageWithMarkdownSchema.extend({
    properties: z.object({
      Name:        notroProperties.title,
      Slug:        notroProperties.richText,
      Description: notroProperties.richText,
      Public:      notroProperties.checkbox,
      Tags:        notroProperties.multiSelect,
      Date:        notroProperties.date,
    }),
  }),
});

export const collections = { posts };

ページでのレンダリング

---
// src/pages/blog/[slug].astro
import { getCollection } from 'astro:content';
import { NotionMarkdownRenderer, getPlainText } from 'notro';

export async function getStaticPaths() {
  const posts = await getCollection('posts');
  return posts.map(entry => ({
    params: { slug: getPlainText(entry.data.properties.Slug) || entry.id },
    props: { entry },
  }));
}

const { entry } = Astro.props;

---

<article>
  <h1>{entry.data.properties.Name.title[0]?.plain_text}</h1>
  <div class='nt-markdown-content'>
    <NotionMarkdownRenderer markdown={entry.data.markdown} />
  </div>
</article>

3種類のエントリーポイント

インポート	用途
notro	コンポーネント・ローダー（.astro ファイルから）
notro/utils	純粋な TypeScript ユーティリティ（どこからでも）
notro/integration	Astro インテグレーション（astro.config.mjs から）