basefyio + Next.js: Database Backend for Your App

Install

npm install basefyio-js

Create the client

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

export const bf =createClient({
  projectId: process.env.NEXT_PUBLIC_BASEFYIO_PROJECT_ID!,
  apiKey: process.env.NEXT_PUBLIC_BASEFYIO_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 { bf } from "@/lib/basefyio";

export default async function Posts() {
  const { data } = await bf
    .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 basefyio work with the Next.js App Router?

Yes. The basefyio-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 basefyio 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