Notion + Next.js 블로그 처음부터 — 카테고리 트리까지 설계

{
  "parent": { "page_id": "YOUR_ROOT_PAGE_ID" },
  "title": "Blog Categories",
  "properties": {
    "Name":        { "type": "title" },
    "Slug":        { "type": "text" },
    "Order":       { "type": "number" },
    "Description": { "type": "text" },
    "Published":   { "type": "checkbox" }
  }
}

{
  "data_source_id": "BLOG_CATEGORIES_DS_ID",
  "schema_updates": {
    "Parent": {
      "type": "relation",
      "dataSourceUrl": "collection://BLOG_CATEGORIES_DS_ID"
    }
  }
}

{
  "parent": { "page_id": "YOUR_ROOT_PAGE_ID" },
  "title": "Blog Posts",
  "properties": {
    "Title":       { "type": "title" },
    "Slug":        { "type": "text" },
    "Date":        { "type": "date" },
    "Description": { "type": "text" },
    "Tags":        { "type": "multi_select" },
    "Category": {
      "type": "relation",
      "dataSourceUrl": "collection://BLOG_CATEGORIES_DS_ID"
    },
    "Published":   { "type": "checkbox" }
  }
}

{
  "parent": { "data_source_id": "BLOG_CATEGORIES_DS_ID" },
  "pages": [
    { "properties": { "Name": "C++26",      "Slug": "cpp26",      "Order": 10, "Published": "__YES__" } },
    { "properties": { "Name": "Rust",       "Slug": "rust",       "Order": 20, "Published": "__YES__" } },
    { "properties": { "Name": "Playground", "Slug": "playground", "Order": 30, "Published": "__YES__" } },
    { "properties": { "Name": "Lab",        "Slug": "lab",        "Order": 40, "Published": "__YES__" } }
  ]
}

{
  "parent": { "data_source_id": "BLOG_CATEGORIES_DS_ID" },
  "pages": [
    {
      "properties": {
        "Name": "Reflection",
        "Slug": "reflection",
        "Order": 10,
        "Parent": ["https://www.notion.so/CPP26_CATEGORY_ID"],
        "Published": "__YES__"
      }
    }
  ]
}

import { Client } from "@notionhq/client";
import { unstable_cache } from "next/cache";
 
const notion = new Client({ auth: process.env.NOTION_API_KEY });
 
const BLOG_CATEGORIES_DATA_SOURCE_ID =
  process.env.NOTION_BLOG_CATEGORIES_DATABASE_ID ?? "";
const PROJECT_CATEGORIES_DATA_SOURCE_ID =
  process.env.NOTION_PROJECT_CATEGORIES_DATABASE_ID ?? "";
 
export type CategoryScope = "blog" | "projects";
 
export interface Category {
  id: string;
  name: string;
  slug: string;
  parentId: string | null;
  order: number;
  description: string;
  scope: CategoryScope[];
  published: boolean;
}
 
export interface CategoryNode extends Category {
  children: CategoryNode[];
  /** 루트 → 이 노드까지의 slug 체인 (inclusive) */
  path: string[];
  /** 루트 → 이 노드까지의 id 체인 (inclusive) */
  pathIds: string[];
}
 
function normalizeSlug(raw: string): string {
  return raw.trim().toLowerCase();
}
 
async function queryOneDataSource(
  dataSourceId: string,
  scope: CategoryScope
): Promise<Category[]> {
  if (!dataSourceId) return [];
  const response = await notion.dataSources.query({
    data_source_id: dataSourceId,
    filter: { property: "Published", checkbox: { equals: true } },
    sorts: [{ property: "Order", direction: "ascending" }],
  });
 
  return response.results.map((page: any) => {
    const props = page.properties;
    const name = props.Name?.title?.[0]?.plain_text ?? "Untitled";
    const slugRaw = props.Slug?.rich_text?.[0]?.plain_text ?? "";
    const parentRelation = props.Parent?.relation ?? [];
 
    return {
      id: page.id,
      name,
      slug: normalizeSlug(slugRaw || name),
      parentId: parentRelation[0]?.id ?? null,
      order: props.Order?.number ?? 999,
      description: props.Description?.rich_text?.[0]?.plain_text ?? "",
      scope: [scope], // 코드 레벨에서 스코프 태깅
      published: props.Published?.checkbox ?? false,
    } satisfies Category;
  });
}
 
export const getAllCategories = unstable_cache(
  async (): Promise<Category[]> => {
    const [blog, projects] = await Promise.all([
      queryOneDataSource(BLOG_CATEGORIES_DATA_SOURCE_ID, "blog"),
      queryOneDataSource(PROJECT_CATEGORIES_DATA_SOURCE_ID, "projects"),
    ]);
    return [...blog, ...projects];
  },
  ["notion-categories"],
  { tags: ["notion-categories"], revalidate: 300 }
);
 
function buildTree(categories: Category[], scope?: CategoryScope): CategoryNode[] {
  const eligible = scope
    ? categories.filter((c) => c.scope.includes(scope))
    : categories;
  const byId = new Map<string, CategoryNode>();
  for (const c of eligible) {
    byId.set(c.id, { ...c, children: [], path: [], pathIds: [] });
  }
  const roots: CategoryNode[] = [];
  for (const node of byId.values()) {
    const parent = node.parentId ? byId.get(node.parentId) : null;
    if (parent) parent.children.push(node);
    else roots.push(node);
  }
  const sortFn = (a: CategoryNode, b: CategoryNode) =>
    a.order - b.order || a.name.localeCompare(b.name);
  const fixPaths = (node: CategoryNode, parent: CategoryNode | null) => {
    node.path = parent ? [...parent.path, node.slug] : [node.slug];
    node.pathIds = parent ? [...parent.pathIds, node.id] : [node.id];
    node.children.sort(sortFn);
    for (const child of node.children) fixPaths(child, node);
  };
  roots.sort(sortFn);
  for (const r of roots) fixPaths(r, null);
  return roots;
}
 
export async function getCategoryTree(scope: CategoryScope): Promise<CategoryNode[]> {
  return buildTree(await getAllCategories(), scope);
}
 
/** URL chain (예: ["cpp26", "reflection"]) 을 트리 노드로 해석 */
export async function resolveCategoryPath(
  chain: string[],
  scope: CategoryScope
): Promise<CategoryNode | null> {
  if (chain.length === 0) return null;
  const lowered = chain.map(normalizeSlug);
  let level = await getCategoryTree(scope);
  let current: CategoryNode | null = null;
  for (const seg of lowered) {
    const match = level.find((n) => n.slug === seg);
    if (!match) return null;
    current = match;
    level = match.children;
  }
  return current;
}
 
/** 리프 id로 부모 체인을 거슬러 올라가 루트→리프 순으로 반환 */
export async function getCategoryChain(leafId: string | null): Promise<Category[]> {
  if (!leafId) return [];
  const all = await getAllCategories();
  const byId = new Map(all.map((c) => [c.id, c]));
  const chain: Category[] = [];
  const seen = new Set<string>();
  let cur = byId.get(leafId);
  while (cur && !seen.has(cur.id)) {
    seen.add(cur.id);
    chain.unshift(cur);
    cur = cur.parentId ? byId.get(cur.parentId) : undefined;
  }
  return chain;
}
 
/** 서브트리 ids 전체 (서브카테고리 포함 필터용) */
export function collectSubtreeIds(node: CategoryNode): string[] {
  const ids: string[] = [node.id];
  for (const child of node.children) ids.push(...collectSubtreeIds(child));
  return ids;
}

const categoryRelation = props.Category?.relation ?? [];
const categoryId: string | null = categoryRelation[0]?.id ?? null;
 
// 이후 categories.ts의 getCategoryChain(categoryId)로 루트→리프 해석

// app/blog/categories/[...slug]/page.tsx
export default async function Page({
  params,
}: { params: Promise<{ slug: string[] }> }) {
  const { slug } = await params;
  const node = await resolveCategoryPath(slug, "blog");
  if (!node) notFound();
 
  const ids = new Set(collectSubtreeIds(node));
  const allPosts = await getAllPosts();
  const posts = allPosts.filter(
    (p) => p.categoryId && ids.has(p.categoryId)
  );
 
  // ... 렌더
}

const chain = await getCategoryChain(post.categoryId);
 
return (
  <nav>
    <Link href="/blog">blog</Link>
    {chain.map((c, i) => {
      const href = `/blog/categories/${chain
        .slice(0, i + 1)
        .map((x) => x.slug)
        .join("/")}`;
      return <Link key={c.id} href={href}>{c.slug}</Link>;
    })}
    <span>{post.slug}</span>
  </nav>
);

NOTION_API_KEY=ntn_...
NOTION_BLOG_DATABASE_ID=<blog_posts_ds_id>
NOTION_PROJECTS_DATABASE_ID=<projects_ds_id>
NOTION_BLOG_CATEGORIES_DATABASE_ID=<blog_categories_ds_id>
NOTION_PROJECT_CATEGORIES_DATABASE_ID=<project_categories_ds_id>
REVALIDATION_SECRET=<any_secret>

images: {
  remotePatterns: [
    { protocol: "https", hostname: "prod-files-secure.s3.us-west-2.amazonaws.com" },
    { protocol: "https", hostname: "www.notion.so" },
  ],
}