fix: include admin_basepath in absolute navigation paths

Fixes navigate(..., { absolute: true }) only prepending basepath but missing admin_basepath, causing links like /data instead of /admin/data. Adds admin_basepath to BkndAdminConfig type. Amp-Thread-ID: https://ampcode.com/threads/T-019cfd9f-89ca-703c-a86c-99eef60e3fe8 Co-authored-by: Amp <amp@ampcode.com>
2026-08-03 08:36:01 +00:00 · 2026-03-17 16:20:45 -05:00
3 changed files with 18 additions and 85 deletions
@@ -16,6 +16,11 @@ export type BkndAdminConfig = {
    * @default `/`
    */
   basepath?: string;
   /**
    * Sub-path for the Admin UI within the base path
    * @default ``
    */
   admin_basepath?: string;
   /**
    * Path to return to when clicking the logo
    * @default `/`
@@ -101,7 +101,7 @@ export function useNavigate() {
               }
            }
-            const _url = options?.absolute ? `~/${basepath}${url}`.replace(/\/+/g, "/") : url;
+            const _url = options?.absolute ? `~/${app.options.basepath}/${app.options.admin_basepath}${url}`.replace(/\/+/g, "/") : url;
            const state = {
               ...options?.state,
               referrer: location,
@@ -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 configuration from the `bknd.config.ts` file:
+Create a helper file to instantiate the bknd instance and retrieve the API, importing the configurationfrom the `bknd.config.ts` file:
 ```ts title="src/bknd.ts"
 import {
@@ -127,80 +127,31 @@ 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 (
-    <Suspense>
+    <Admin
-      <Admin
+      withProvider={{ user: api.getUser() }}
-        withProvider={{ user: api.getUser() }}
+      config={{
-        config={{
+        basepath: "/admin",
-          basepath: "/admin",
+        logo_return_path: "/../",
-          logo_return_path: "/../",
+        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
 You can use the `getApi` helper function we've already set up to fetch and mutate in static pages and server components:
@@ -221,26 +172,3 @@ 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;
 ```