From b3c9f258de73194509f7f0468ce95be14ec07f35 Mon Sep 17 00:00:00 2001
From: Shishant Biswas <shishantbiswas@gmail.com>
Date: Sat, 28 Mar 2026 14:55:38 +0530
Subject: [PATCH 1/2] add: prod section at the end

---
 .../integration/(frameworks)/nextjs.mdx       | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/docs/content/docs/(documentation)/integration/(frameworks)/nextjs.mdx b/docs/content/docs/(documentation)/integration/(frameworks)/nextjs.mdx
index b31deb9b..bd9f7670 100644
--- a/docs/content/docs/(documentation)/integration/(frameworks)/nextjs.mdx
+++ b/docs/content/docs/(documentation)/integration/(frameworks)/nextjs.mdx
@@ -71,7 +71,7 @@ export type NextjsBkndConfig<Env = NextjsEnv> = FrameworkBkndConfig<Env> & {
 
 ## Serve the API
 
-Create a helper file to instantiate the bknd instance and retrieve the API, importing the configurationfrom the `bknd.config.ts` file:
+Create a helper file to instantiate the bknd instance and retrieve the API, importing the configuration from the `bknd.config.ts` file:
 
 ```ts title="src/bknd.ts"
 import {
@@ -172,3 +172,26 @@ export default async function Home() {
   );
 }
 ```
+
+## Note for Production
+If your admin component is not rendering and has a error like `Identifier 'b' has already been declared`, you will need to add these lines to your `next.config.(mjs|ts)` file:
+
+```ts
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  // ...
+  // for turbopack 
+  experimental: {
+    turbopackMinify: false,
+  },
+
+  // for webpack
+  // webpack: (config) => {
+  //   config.optimization.minimize = false;
+  //   return config;
+  // },
+};
+
+export default nextConfig;
+```

From 43cbdb3010d0005f4f7c77bf97d85f81bcb16d15 Mon Sep 17 00:00:00 2001
From: Shishant Biswas <shishantbiswas@gmail.com>
Date: Sat, 28 Mar 2026 15:31:43 +0530
Subject: [PATCH 2/2] add(docs): update next.js docs to use colocation for
 `<Admin />` component

---
 .../integration/(frameworks)/nextjs.mdx       | 71 ++++++++++++++++---
 1 file changed, 60 insertions(+), 11 deletions(-)

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,
+});
+```
+<Callout type="info">
+  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.
+</Callout>
+
 
 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 (
-    <Admin
-      withProvider={{ user: api.getUser() }}
-      config={{
-        basepath: "/admin",
-        logo_return_path: "/../",
-        theme: "system",
-      }}
-    />
+    <Suspense>
+      <Admin
+        withProvider={{ user: api.getUser() }}
+        config={{
+          basepath: "/admin",
+          logo_return_path: "/../",
+          theme: "system",
+        }}
+      />
+    </Suspense>
   );
-}
+};
 ```
 
+## 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 (
+    <html lang="en">
+      <body>
+        <ClientProvider>
+          {children}
+        </ClientProvider>
+      </body>
+    </html>
+  );
+};
+```
+
+
 ## 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: