updated nextjs example with app router

2026-03-16 12:37:20 +00:00 · 2025-02-27 20:09:03 +01:00
parent 2d5da63eb2
commit 09074f6591
36 changed files with 334 additions and 284 deletions
--- a/examples/nextjs/src/app/admin/[[...admin]]/page.tsx
+++ b/examples/nextjs/src/app/admin/[[...admin]]/page.tsx
@@ -0,0 +1,18 @@
+import { Admin } from "bknd/ui";
+import "bknd/dist/styles.css";
+import { getApi } from "@/bknd";
+
+export default async function AdminPage() {
+   const api = await getApi({ verify: true });
+
+   return (
+      <Admin
+         withProvider={{ user: api.getUser() }}
+         config={{
+            basepath: "/admin",
+            logo_return_path: "/../",
+            color_scheme: "system",
+         }}
+      />
+   );
+}
--- a/examples/nextjs/src/app/api/[[...bknd]]/route.ts
+++ b/examples/nextjs/src/app/api/[[...bknd]]/route.ts
@@ -0,0 +1,12 @@
+import { getApp } from "@/bknd";
+
+const handler = async (request: Request) => {
+   const app = await getApp();
+   return app.fetch(request);
+};
+
+export const GET = handler;
+export const POST = handler;
+export const PUT = handler;
+export const PATCH = handler;
+export const DELETE = handler;
--- a/examples/nextjs/src/app/favicon.ico
+++ b/examples/nextjs/src/app/favicon.ico
--- a/examples/nextjs/src/app/globals.css
+++ b/examples/nextjs/src/app/globals.css
@@ -0,0 +1,25 @@
+@import "tailwindcss";
+
+:root {
+   --background: #ffffff;
+   --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+   :root {
+      --background: #0a0a0a;
+      --foreground: #ededed;
+   }
+}
+
+@theme {
+   --font-sans: var(--font-geist-sans);
+   --font-mono: var(--font-geist-mono);
+   --color-background: var(--background);
+   --color-foreground: var(--foreground);
+}
+
+body {
+   @apply bg-background text-foreground;
+   font-family: Arial, Helvetica, sans-serif;
+}
--- a/examples/nextjs/src/app/layout.tsx
+++ b/examples/nextjs/src/app/layout.tsx
@@ -0,0 +1,32 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+   variable: "--font-geist-sans",
+   subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+   variable: "--font-geist-mono",
+   subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+   title: "Create Next & bknd App",
+   description: "Presented by create next app & bknd",
+};
+
+export default function RootLayout({
+   children,
+}: Readonly<{
+   children: React.ReactNode;
+}>) {
+   return (
+      <html lang="en">
+         <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+            {children}
+         </body>
+      </html>
+   );
+}
--- a/examples/nextjs/src/app/page.tsx
+++ b/examples/nextjs/src/app/page.tsx
@@ -0,0 +1,97 @@
+import Image from "next/image";
+import { getApi } from "@/bknd";
+
+export default async function Home() {
+   const api = await getApi();
+
+   return (
+      <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+         <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+            <div className="flex flex-row items-center ">
+               <Image
+                  className="dark:invert"
+                  src="/next.svg"
+                  alt="Next.js logo"
+                  width={180}
+                  height={38}
+                  priority
+               />
+               <div className="ml-3.5 mr-2 font-mono opacity-70">&amp;</div>
+               <Image
+                  className="dark:invert"
+                  src="/bknd.svg"
+                  alt="bknd logo"
+                  width={183}
+                  height={59}
+                  priority
+               />
+            </div>
+            <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
+               <li className="mb-2">
+                  Get started by editing{" "}
+                  <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
+                     src/app/page.tsx
+                  </code>
+                  .
+               </li>
+               <li>Save and see your changes instantly.</li>
+            </ol>
+
+            <div className="flex gap-4 items-center flex-col sm:flex-row">
+               <a
+                  className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+                  href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+                  target="_blank"
+                  rel="noopener noreferrer"
+               >
+                  <Image
+                     className="dark:invert"
+                     src="/vercel.svg"
+                     alt="Vercel logomark"
+                     width={20}
+                     height={20}
+                  />
+                  Deploy now
+               </a>
+               <a
+                  className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
+                  href="https://docs.bknd.io/integration/nextjs"
+                  target="_blank"
+                  rel="noopener noreferrer"
+               >
+                  Read our docs
+               </a>
+            </div>
+
+            <pre className="text-sm">
+               {JSON.stringify(await api.data.readMany("posts"), null, 2)}
+            </pre>
+         </main>
+         <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
+            <a
+               className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+               href="/ssr"
+            >
+               <Image aria-hidden src="/file.svg" alt="File icon" width={16} height={16} />
+               SSR
+            </a>
+            <a
+               className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+               href="/admin"
+            >
+               <Image aria-hidden src="/window.svg" alt="Window icon" width={16} height={16} />
+               Admin
+            </a>
+            <a
+               className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+               href="https://bknd.io"
+               target="_blank"
+               rel="noopener noreferrer"
+            >
+               <Image aria-hidden src="/globe.svg" alt="Globe icon" width={16} height={16} />
+               Go to bknd.io →
+            </a>
+         </footer>
+      </div>
+   );
+}
--- a/examples/nextjs/src/app/ssr/page.tsx
+++ b/examples/nextjs/src/app/ssr/page.tsx
@@ -0,0 +1,14 @@
+import { getApi } from "@/bknd";
+
+export default async function SSRPage() {
+   const api = await getApi({ verify: true });
+   const { data } = await api.data.readMany("posts");
+
+   return (
+      <div>
+         <h1>Server-Side Rendered Page</h1>
+         <pre>{JSON.stringify(data, null, 2)}</pre>
+         <pre>{JSON.stringify(api.getUser(), null, 2)}</pre>
+      </div>
+   );
+}