diff --git a/docs/content/docs/(documentation)/integration/(frameworks)/nextjs.mdx b/docs/content/docs/(documentation)/integration/(frameworks)/nextjs.mdx
index bd9f7670..e7595be1 100644
--- a/docs/content/docs/(documentation)/integration/(frameworks)/nextjs.mdx
+++ b/docs/content/docs/(documentation)/integration/(frameworks)/nextjs.mdx
@@ -127,31 +127,80 @@ export const DELETE = handler;
```
## Enabling the Admin UI
+Create a file at `admin/[[...admin]]/page.client.tsx`:
+
+``` tsx title="admin/[[...admin]]/page.client.tsx"
+"use client";
+import dynamic from "next/dynamic";
+
+export const Admin = dynamic(async () => (await import("bknd/ui")).Admin, {
+ ssr: false,
+});
+```
+
+ We are using [Colocation](https://nextjs.org/docs/app/getting-started/project-structure#colocation) to prevent server-side hydration error, and the dynamic function to load Admin component only on client side.
+
+
Create a page at `admin/[[...admin]]/page.tsx`:
-
```tsx title="admin/[[...admin]]/page.tsx"
-import { Admin } from "bknd/ui";
import { getApi } from "@/bknd";
import "bknd/dist/styles.css";
+import { Admin } from "./page.client";
+import { Suspense } from "react";
+import { redirect } from "next/navigation";
export default async function AdminPage() {
// make sure to verify auth using headers
const api = await getApi({ verify: true });
+ // early return if not logged in
+ if (!api.getUser()) {
+ return redirect("/unauthorized");
+ }
+
return (
-
+
+
+
);
-}
+};
```
+## React SDK configuration
+
+To use queries and mutation on client side, bknd provides first class support for it with it's [React SDK](/usage/react)
+to set it up with Next.js add the `ClientProvider` to your root layout
+
+
+```tsx title="app/layout.tsx"
+import { ClientProvider } from "bknd/client";
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+
+ {children}
+
+
+
+ );
+};
+```
+
+
## Example usage of the API
You can use the `getApi` helper function we've already set up to fetch and mutate in static pages and server components: