お知らせテンプレートで始める

お知らせテンプレート「しおり」は、Next.jsで一覧・詳細・カテゴリー絞り込みを作るテンプレートです。アカウントやAPIキーがなくても、同梱のサンプル記事で動かせます。公開デモでも表示を確認できます。

1. サンプルで試す

Node.js 22以降を用意し、リポジトリを取得します。

git clone https://github.com/ichi1007/genko-announcements-starter.gitcd genko-announcements-starternpm cicp .env.example .env.localnpm run dev

http://localhost:3000を開くと、サンプル記事3件が表示されます。モノレポを利用する場合は、examples/announcementsでnpm ci以降を実行します。

.env.exampleではGENKO_DEMO=trueです。また、環境変数を何も設定していない場合もサンプルになります。GENKO_DEMO=falseを明示すると、接続先が未設定でもサンプルへ切り替わらずエラーになります。

2. Vercelで試す

リポジトリのREADMEにある「Vercelでデプロイ」ボタン、またはデプロイ画面から、自分のリポジトリを作成してデプロイできます。

環境変数なしではサンプルを表示します。サンプル表示中はテンプレートの案内バーが出て、検索エンジン向けにnoindexを設定します。

3. genko.meに記事を用意する

1. クイックスタートを参考にワークスペースを用意し、リスト形式のAPIを作成します。エンドポイントはnewsにします。
2. APIの「スキーマ」（/w/your-workspace/apis/news/schema）で「インポート」を押し、テンプレートのseed/schema.jsonを読み込んで保存します。
3. コンテンツ一覧（/w/your-workspace/apis/news）の「コンテンツのインポートとエクスポート」から「インポート」を選び、seed/contents.jsonを読み込みます。「取り込み後の状態」を「公開中」に変更し、検証結果を確認して取り込みます。自分の記事を作成して公開しても構いません。
4. ワークスペースの「設定・プラン」→「APIキー」でキーを発行します。「選択したAPIのみ」を選び、newsを許可します。有効期間も確認してください。

スキーマには次の4項目があり、すべて必須です。

テンプレートの接続処理はlib/content.tsに用意されています。この手順ではCLIによるクライアント生成は不要です。

4. 接続先を設定する

ローカルの.env.localを次のように変更し、開発サーバーを再起動します。

GENKO_DEMO=falseGENKO_WORKSPACE=your-workspaceGENKO_API_ENDPOINT=newsGENKO_API_KEY=your-api-keyGENKO_TEMPLATE_DEMO=false

GENKO_WORKSPACEはhttps://genko.me/w/your-workspaceのyour-workspaceにあたるIDです。エンドポイントを変更した場合はGENKO_API_ENDPOINTも合わせます。省略時のエンドポイントはnewsです。

Vercelにも同じ環境変数を設定し、再デプロイします。.env.localは本番へ自動で引き継がれません。APIキーはサーバーだけで使い、NEXT_PUBLIC_を付けたりGitへ追加したりしないでください。

GENKO_DEMO=trueが残っていると、接続先を設定してもサンプルを表示します。接続後の認証エラーや取得失敗をサンプルで置き換える動作はありません。APIキー・アクセス範囲・有効期間と、記事が公開済みかを確認してください。

5. 自分のサイトに調整する

一覧は公開日の降順で、6件ごとにページを送ります。記事はページ要求時に取得しますが、開いたままのページの自動更新や下書きプレビューは含みません。戻る操作などではNext.jsのクライアントキャッシュが使われる場合があります。

自分のサイトを公開するときはGENKO_DEMO=falseとGENKO_TEMPLATE_DEMO=falseにし、案内バーを非表示にします。カテゴリーを変える場合は記事の値とlib/content.tsのカテゴリーを揃えてください。