Next.js

genko.meがもっとも手厚く対応しているのがNext.jsです。App RouterのサーバーコンポーネントにList・Viewを置くと、取得・表示・ページ送り・下書きプレビューまでを部品側が受け持ちます。Route HandlerやProxyの追加は不要で、APIキーはサーバーに置いたままになります。

配信API自体はただのRESTなので、Next.js以外でも利用できます。この対象の強みは「取得処理を書かずに済むこと」です。

使うパッケージ

@genko-me/reactはNext.js 16以降・React 19をpeerDependenciesに指定しています。@genko-me/sdk単体はNext.js 14以降で使えます。

向いている用途

• App Routerのブログ・お知らせ・事例など、サーバーで描画して配信するページ。
• 記事一覧にページ送りが必要なサイト。PaginationがServer Action経由で次のページを取得します。
• 編集者が保存した下書きを、公開前に本番と同じページで確認したいサイト。

向いていないもの

• 静的エクスポート（output: "export"）とEdgeランタイム。 PaginationはServer Actionを使うため動作しません。ページ送りを使わない一覧・詳細だけであれば、SDKの取得メソッドで組み立てられます。
• Pages Router。 List・ViewはApp Router専用です。next/navigationとnext/serverのAPIに依存しています。
• ブラウザからの直接取得。 APIキーをクライアントコンポーネントへ渡す構成は想定していません。取得はサーバー側で行います。
• コンテンツの書き込み。 配信APIは読み取り専用です。記事の作成・更新は管理画面から行います。

次に読む

• 導入：インストールから一覧・詳細ページまで
• 実践：ページ送り・下書きプレビュー・Webhook再検証
• List・Viewで表示する：propsの一覧
• 取得処理を自分で書く：メタデータやサイトマップなど、自分で扱う場合