Start with the announcements template

The announcements template "Shiori" is a Next.js template that builds a list, detail pages, and category filtering. You can run it with the bundled sample entries, with no account or API key. You can also see it in the live demo.

1. Try it with the samples

Install Node.js 22 or later, then clone the repository.

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

Open http://localhost:3000 to see three sample entries. If you use the monorepo, run everything from npm ci onward in examples/announcements.

.env.example sets GENKO_DEMO=true. The template also shows samples when you set no environment variables at all. If you set GENKO_DEMO=false explicitly, it errors instead of switching to the samples when no connection target is set.

The sample entries and category names are in Japanese.

2. Try it on Vercel

From the "Deploy with Vercel" button in the repository's README, or from the deploy screen, you can create your own repository and deploy.

Without environment variables, it shows the samples. While samples are showing, the template displays a notice bar and sets noindex for search engines.

3. Prepare entries in genko.me

1. Set up a workspace by following the Quickstart, and create a List API. Make the endpoint news.
2. On the API's Schema screen (/w/your-workspace/apis/news/schema), select Import, load the template's seed/schema.json, and save.
3. In the content list (/w/your-workspace/apis/news), choose Import from "Import or export content" and load seed/contents.json. Change "Status after import" to Published, check the validation results, and import. You can also write and publish your own entries.
4. In the workspace, open "Settings and plan" > API keys and issue a key. Choose "Selected APIs only" and allow news. Check the validity period too.

The schema has these four fields, and all are required.

The template's connection code is in lib/content.ts. You don't need to generate a client with the CLI for these steps.

4. Set the connection target

Change your local .env.local as follows, then restart the dev server.

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

GENKO_WORKSPACE is the ID that corresponds to your-workspace in https://genko.me/w/your-workspace. If you changed the endpoint, change GENKO_API_ENDPOINT to match. The default endpoint is news.

Set the same environment variables on Vercel and redeploy. .env.local isn't carried over to production automatically. Use the API key only on the server, and don't add the NEXT_PUBLIC_ prefix or commit it to Git.

If GENKO_DEMO=true is left in place, the template shows the samples even after you set a connection target. After it connects, it never replaces an authentication error or a failed fetch with the samples. Check the API key, its access scope and validity period, and whether the entries are published.

5. Make it your own site

The list is sorted by publish date, newest first, with 6 entries per page. Entries are fetched when a page is requested. A page that stays open doesn't refresh automatically, and draft preview isn't included. Next.js's client cache may be used for actions such as going back.

When you publish your own site, set GENKO_DEMO=false and GENKO_TEMPLATE_DEMO=false to hide the notice bar. If you change the categories, keep the entry values and the categories in lib/content.ts aligned.