bknd/docs/integration/nextjs.mdx

---
title: 'Next.js'
description: 'Run bknd inside Next.js'
---
import InstallBknd from '/snippets/install-bknd.mdx';

## Installation
Install bknd as a dependency:
<InstallBknd />

## Serve the API
``` tsx
// pages/api/[...route].ts
import { serve } from "bknd/adapter/nextjs";

export const config = {
   runtime: "experimental-edge",
   unstable_allowDynamic: ["**/*.js"]
};

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](/setup) guide.

## Enabling the Admin UI
Create a file `[[...admin]].tsx` inside the `pages/admin` folder:
```tsx
// pages/admin/[[...admin]].tsx
import { adminPage, getServerSideProps } from "bknd/adapter/nextjs";
import "bknd/dist/styles.css";

export { getServerSideProps };
export default adminPage({
   config: { basepath: "/admin" }
});
```

## Example usage of the API in pages dir
Using pages dir, you need to wrap the `getServerSideProps` function with `withApi` to get access
to the API. With the API, you can query the database or retrieve the authentication status:
```tsx
import { withApi } from "bknd/adapter/nextjs";
import type { InferGetServerSidePropsType as InferProps } from "next";

export const getServerSideProps = withApi(async (context) => {
   const { data = [] } = await context.api.data.readMany("todos");
   const user = context.api.getUser();

   return { props: { data, user } };
});

export default function Home(props: InferProps<typeof getServerSideProps>) {
   const { data, user } = props;
   return (
      <div>
         <h1>Data</h1>
         <pre>{JSON.stringify(data, null, 2)}</pre>

         <h1>User</h1>
         <pre>{JSON.stringify(user, null, 2)}</pre>
      </div>
   );
}
```