Kolaybase + Next.js: PostgreSQL Backend for Your App

Install

npm install kolaybase-js

Create the client

// lib/kolaybase.ts
import { createClient } from "kolaybase-js";

export const kb = createClient({
  projectId: process.env.NEXT_PUBLIC_KOLAYBASE_PROJECT_ID!,
  apiKey: process.env.NEXT_PUBLIC_KOLAYBASE_ANON_KEY!,
});

Use the public anon key (gated by row-level security) in the browser and Server Components. For trusted server-only code, use a service key from a non-public env variable instead.

Fetch data in a Server Component

// app/posts/page.tsx
import { kb } from "@/lib/kolaybase";

export default async function Posts() {
  const { data } = await kb
    .from("posts")
    .select("id, title")
    .order("created_at", { ascending: false });

  return <ul>{data?.map((p) => <li key={p.id}>{p.title}</li>)}</ul>;
}

Frequently asked questions

Does Kolaybase work with the Next.js App Router?

Yes. The kolaybase-js SDK works in Server Components, Route Handlers, and Client Components. Use the public anon key on the client and a service key only in server-only code.

Where do I put my Kolaybase keys in Next.js?

Public anon keys go in NEXT_PUBLIC_ environment variables for client use. Keep service keys in non-public env variables, accessed only on the server.

Other integrations