ブログ・リリースノートの実装レシピ

npm install notcms server-only
npx notcms init
# After changing Notion properties, sync in Dashboard then run:
npx notcms pull

// src/notcms/reader.ts (server only)
import "server-only";
import { nc } from "./schema";
import { createContentReader } from "./content";

export const content = createContentReader(nc);

// app/[locale]/releases/page.tsx
import { notFound } from "next/navigation";
import { connection } from "next/server";
import { content } from "@/notcms/reader";
import { contentUrl } from "@/notcms/content";

export default async function ReleasesPage({ params }: {
  params: Promise<{ locale: string }>;
}) {
  await connection();
  const { locale } = await params;
  if (locale !== "ja" && locale !== "en") notFound();
  const releases = await content.listReleases(locale);
  return (
    <main>
      <h1>{locale === "ja" ? "リリースノート" : "Release notes"}</h1>
      {releases.length === 0 ? (
        <p>{locale === "ja" ? "この言語のリリースはありません。" : "No releases in this language."}</p>
      ) : (
        <ul>{releases.map((release) => (
          <li key={release.id}>
            <a href={contentUrl("releases", locale, release.id)}>{release.title}</a>
          </li>
        ))}</ul>
      )}
    </main>
  );
}

// app/[locale]/releases/[id]/page.tsx
import { notFound } from "next/navigation";
import { connection } from "next/server";
import { content } from "@/notcms/reader";

export default async function ReleasePage({ params }: {
  params: Promise<{ locale: string; id: string }>;
}) {
  await connection();
  const { locale, id } = await params;
  if (locale !== "ja" && locale !== "en") notFound();
  const release = await content.getRelease(id, locale);
  if (release === null) notFound();
  return <article><h1>{release.title}</h1><pre>{release.content}</pre></article>;
}