React

Next.jsを使わないReactアプリ——Viteで作ったSPA、React Router、create-react-app系の構成——からもgenko.meのコンテンツを表示できます。配信APIはRESTなので、@genko-me/sdkをブラウザから呼び、取得した値を自分のコンポーネントで描画します。

Next.js向けのList・Viewのように、取得から表示までを任せる部品はありません。取得と状態管理はアプリ側で書きます。

Next.jsを使っている場合はNext.jsを参照してください。

使うパッケージ

この対象で使えないもの。

• @genko-me/react/next（List・View・Pagination・状態表示・プレビュー通知）。サーバーコンポーネント専用で、server-onlyとnext/navigation・next/serverに依存しています。
• @genko-me/sdk/next（nextPreview・nextRevalidate）。Next.jsのRoute HandlerとDraft Mode・revalidatePathのための部品です。

正直な話：APIキーとSEO

ブラウザから直接呼ぶ構成では、APIキーは秘密にできません。 バンドルに埋め込まれた値も、通信時のX-API-KEYヘッダーも、開発者ツールから読めます。読み取り専用のキーとはいえ、そのキーで許可したAPIは誰でも読めるものとして扱ってください。

• APIキーは「選択したAPIのみ」で公開して差し支えないAPIだけに絞る。
• 有効期間を短くし、定期的に交換する。
• 隠したいデータがあるなら、自分のサーバーで取得してJSONを返す構成にする。

検索エンジン向けには不利です。 初期HTMLは空の<div id="root">で、本文はJavaScriptの実行後に入ります。OGPのタイトル・説明もサーバーから返せません。検索流入やSNSシェアが重要なページなら、サーバーで描画するフレームワーク（Next.js、Nuxt、SvelteKit、Astro）を選ぶほうが確実です。

向いている用途

• ログイン後の画面や社内ツールなど、検索流入を前提としない画面にお知らせ・ヘルプを出す。
• すでにあるSPAの一部分だけをgenko.meで差し替える。
• 管理する人がコンテンツを更新したら、再ビルドなしで即座に反映したい画面。

向いていないもの

• 検索エンジンやSNSのプレビューを重視する公開ページ。
• APIキーを見せたくない構成。
• 保存済み下書きのプレビュー通知やnoindexの付与。Viewが自動で行う処理は自分で実装します。
• Webhookの受信。受け取るサーバーがないため、実践の方法をとります。

次に読む

• 導入：インストールから一覧・詳細の表示まで
• 実践：ページ送り・下書きプレビュー・更新の反映
• コンテンツ取得：取得メソッドの一覧
• 配信API：SDKを使わずHTTPで取得する