Next.js support is currently experimental, this guide only covers adding bknd using pages folder.

​
Installation

Install bknd as a dependency:

​
Serve the API

// pages/api/[...route].ts
import { serve } from "bknd/adapter/nextjs";
import type { PageConfig } from "next";

export const config: PageConfig = {
   runtime: "edge"
};

export default serve({
   connection: {
      type: "libsql",
      config: {
         url: process.env.DB_URL!,
         authToken: process.env.DB_AUTH_TOKEN!
      }
   }
});

For more information about the connection object, refer to the Setup guide.

​
Enabling the Admin UI

Create a file [[...admin]].tsx inside the pages/admin folder:

// pages/admin/[[...admin]].tsx
import type { PageConfig } from "next";
import dynamic from "next/dynamic";
import "bknd/dist/styles.css";

export const config: PageConfig = {
  runtime: "experimental-edge",
};

const Admin = dynamic(
  () => import("bknd/ui").then((mod) => mod.Admin),
  { ssr: false },
);

export default function AdminPage() {
  return <Admin />;
}
FlowsRemix