Skip to main content

Your First Frontend

Krios is API-first — the admin UI and the delivery API are entirely separate from your frontend. This page walks through wiring a Next.js app to your Krios project using the official SDK.

Install the SDK​

pnpm add @krios/sdk @krios/react

Configure the client​

import { KriosClient } from "@krios/sdk";

const krios = new KriosClient({
  endpoint: process.env.KRIOS_ENDPOINT!,
  projectSlug: "demo",
  apiKey: process.env.KRIOS_DELIVERY_KEY!,
  locale: "en-US",
});

KRIOS_DELIVERY_KEY is a delivery-type API key created under Settings → API keys in the admin UI. Delivery keys can be shipped in client bundles; treat preview and management keys as server-only.

Resolve a route​

The simplest pattern: a catch-all route that asks Krios to resolve any path it sees.

// app/[...slug]/page.tsx
import { KriosClient } from "@krios/sdk";
import { KriosRichText } from "@krios/react";
import { notFound } from "next/navigation";

const krios = new KriosClient({
  endpoint: process.env.KRIOS_ENDPOINT!,
  projectSlug: "demo",
  apiKey: process.env.KRIOS_DELIVERY_KEY!,
});

export default async function Page({
  params,
}: {
  params: { slug?: string[] };
}) {
  const path = "/" + (params.slug ?? []).join("/");
  const result = await krios.resolveRoute("main", path);
  if (result.kind !== "entry") notFound();
  const e = result.entry;
  return (
    <article>
      <h1>{String(e.fields.title)}</h1>
      <KriosRichText document={(e.fields.body as { raw: unknown }).raw as never} />
    </article>
  );
}

resolveRoute returns one of:

  • { kind: "entry", entry } — render the entry.
  • { kind: "redirect", target, status } — emit redirect().
  • { kind: "not_found" } — return notFound().

Preview mode​

To preview drafts from the admin UI's "Preview" button, gate on a query param and switch the client to a preview key:

import { headers } from "next/headers";

const isPreview = headers().get("x-krios-preview") === "1";

const krios = new KriosClient({
  endpoint: process.env.KRIOS_ENDPOINT!,
  projectSlug: "demo",
  apiKey: isPreview
    ? process.env.KRIOS_PREVIEW_KEY!
    : process.env.KRIOS_DELIVERY_KEY!,
  preview: isPreview,
});

Pair with the KriosPreviewOverlay component for click-to-edit.

Where to go next​