導入

Next.jsのApp Routerプロジェクトにgenko.meを接続し、/blogと/blog/[id]を表示するまでの手順です。ワークスペースの作成とブログAPIの用意はクイックスタートの手順1〜3にまとめています。

用意するもの

• genko.meのアカウントとワークスペース。APIの作成とAPIキーの発行にはオーナー権限が必要です。
• 記事が1件以上、保存済みかつ公開状態で入っているAPI。下書きのままでは配信APIから取得できません。
• Node.js 20.12以降と、起動できるNext.js 16以降・React 19のApp Routerプロジェクト。表示部品はNode.jsランタイムを対象にしています。
• ターミナルで、そのプロジェクトのpackage.jsonがあるディレクトリを開いておきます。

以下のyour-workspaceは自分のワークスペースIDに、blogは自分のエンドポイントに置き換えます。@/はプロジェクトルートを指すimportエイリアスです。

インストール

CLIがSDKとReact部品を追加し、スキーマから型と接続ファイルを生成します。

npx @genko-me/cli init

ワークスペースIDとAPIキーを入力し、同期するAPIを選ぶと次のファイルが生成されます。nextが依存に入っているプロジェクトでは、@genko-me/reactも一緒に追加されます。

src/app構成のプロジェクトでは、生成先がsrc/libになります。手でパッケージを入れる場合はList・Viewで表示するの「CLIを使わず手動で導入する」を参照してください。

APIキーとワークスペースIDを設定する

APIキーは管理画面の「設定・プラン」→「APIキー」（/w/your-workspace/settings/api-keys）で発行します。作成直後に表示される値を控えてください。全文は後から再表示できません。

CLIが.env.localに書き込みます。すでに環境変数がある場合はそれを使います。

GENKO_API_KEY=発行したキー

ワークスペースIDは生成されたlib/client.tsに埋め込まれます。管理画面のURLがhttps://genko.me/w/your-workspaceならyour-workspaceです。

import "server-only";import { createGenko } from "@genko-me/sdk";import { apis } from "./schema";
export const genko = createGenko({  workspace: "your-workspace",  apiKey: process.env.GENKO_API_KEY!,  apis,});export const client = genko.apis;

.env.localがGitの追跡対象になっていないことを確認してください。キーをクライアントコンポーネントやブラウザ向けの環境変数（NEXT_PUBLIC_）へ渡さないでください。本番へデプロイするときは、ホスティング先にもGENKO_API_KEYを設定します。

記事一覧を出す

サーバーコンポーネントにListを置きます。通常の子要素が1件分のレイアウトです。

import { client } from "@/lib/client";import { List, ListItem, Pagination, Error, Null } from "@genko-me/react/next";
export default function BlogPage() {  return (    <main>      <h1>ブログ</h1>      <List api={client.blog} limit={6} orders="-publishedAt" href="/blog/{id}">        <article>          <h2><ListItem id="title" /></h2>          <ListItem id="publishedAt" format="yyyy/MM/dd" timeZone="Asia/Tokyo" />        </article>        <Pagination />        <Error template />        <Null>公開されている記事はありません。</Null>      </List>    </main>  );}

開発サーバーを起動して/blogを開きます。hrefを指定すると1件全体が記事へのリンクになります。publishedAt・createdAt・updatedAt・revisedAtはスキーマに書かなくてもidに指定できます。既定のタイムゾーンはUTCなので、日本時間で表示するならtimeZoneを指定してください。

Error・Nullは省略するとその状態で何も表示しません。確認中はtemplate付きで置いておくと状況がわかります。

記事詳細を出す

Viewに記事IDを渡します。ページのsearchParamsも渡しておくと、同じページが下書きプレビューにも使えます。

import { client } from "@/lib/client";import { View, ViewItem, Error, Null } from "@genko-me/react/next";
type Props = {  params: Promise<{ id: string }>;  searchParams: Promise<Record<string, string | string[] | undefined>>;};
export default async function BlogDetail({ params, searchParams }: Props) {  const { id } = await params;  return (    <View api={client.blog} id={id} searchParams={searchParams}>      <h1><ViewItem id="title" /></h1>      <ViewItem id="body" />      <Error template />      <Null>記事が見つかりません。</Null>    </View>  );}

リッチテキストのbodyは保存済みのHTMLとして描画されます。見出しや段落の間隔、画像の最大幅はサイト側のCSSで指定してください。オブジェクト形式のAPIではidを省略します。

記事が見つからないときにNext.jsの404画面へ切り替えるならnotFoundを指定します。ストリーミング開始後はNext.jsの仕様上、HTTPステータスが200のまま404画面になる場合があります。

<View api={client.blog} id={id} searchParams={searchParams} notFound>

表示されないとき

スキーマを変更したらgenko pullで型を同期します。詳しくはCLIを参照してください。

次は実践で、ページ送り・下書きプレビュー・Webhookによる再検証を設定します。