shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/bknd-io/bknd/ synced 2026-08-02 00:04:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

add(docs): update next.js docs to use colocation for <Admin /> component

Browse Source
This commit is contained in:
Shishant Biswas
2026-03-28 15:31:43 +05:30
parent b3c9f258de
commit 43cbdb3010
1 changed files with 60 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/content/docs/(documentation)/integration/(frameworks)/nextjs.mdx
+60 -11
View File
@@ -127,31 +127,80 @@ export const DELETE = handler;
``` ```
## Enabling the Admin UI ## 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`: Create a page at `admin/[[...admin]]/page.tsx`:
```tsx title="admin/[[...admin]]/page.tsx" ```tsx title="admin/[[...admin]]/page.tsx"
import { Admin } from "bknd/ui";
import { getApi } from "@/bknd"; import { getApi } from "@/bknd";
import "bknd/dist/styles.css"; import "bknd/dist/styles.css";
import { Admin } from "./page.client";
import { Suspense } from "react";
import { redirect } from "next/navigation";
export default async function AdminPage() { export default async function AdminPage() {
// make sure to verify auth using headers // make sure to verify auth using headers
const api = await getApi({ verify: true }); const api = await getApi({ verify: true });
// early return if not logged in
if (!api.getUser()) {
return redirect("/unauthorized");
}
return ( return (
<Admin <Suspense>
withProvider={{ user: api.getUser() }} <Admin
config={{ withProvider={{ user: api.getUser() }}
basepath: "/admin", config={{
logo_return_path: "/../", basepath: "/admin",
theme: "system", 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 ## 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: You can use the `getApi` helper function we've already set up to fetch and mutate in static pages and server components: