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

Merge pull request #380 from shishantbiswas/next-docs

Browse Source 
add (docs): section for production build issue, React SDK setup
This commit is contained in:
Cameron Pak
2026-03-28 06:06:29 -05:00
committed by GitHub
parent feb3911d46 43cbdb3010
commit 8c596781ff
1 changed files with 84 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/content/docs/(documentation)/integration/(frameworks)/nextjs.mdx
+76 -4
View File
@@ -71,7 +71,7 @@ export type NextjsBkndConfig<Env = NextjsEnv> = FrameworkBkndConfig<Env> & {
## Serve the API ## 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" ```ts title="src/bknd.ts"
import { import {
@@ -127,19 +127,40 @@ 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 (
<Suspense>
<Admin <Admin
withProvider={{ user: api.getUser() }} withProvider={{ user: api.getUser() }}
config={{ config={{
@@ -148,10 +169,38 @@ export default async function AdminPage() {
theme: "system", 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:
@@ -172,3 +221,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;
```