shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 04:27:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated nextjs example with app router

Browse Source
This commit is contained in:
dswbx
2025-02-27 20:09:03 +01:00
parent 2d5da63eb2
commit 09074f6591
36 changed files with 334 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
examples/nextjs/src/app/admin/[[...admin]]/page.tsx Normal file
View File

@@ -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",
}}
/>
);
}

12
examples/nextjs/src/app/api/[[...bknd]]/route.ts Normal file
View File

@@ -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;

BIN
examples/nextjs/src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

25
examples/nextjs/src/app/globals.css Normal file
View File

@@ -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;
}

32
examples/nextjs/src/app/layout.tsx Normal file
View File

@@ -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>
);
}

97
examples/nextjs/src/app/page.tsx Normal file
View File

@@ -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>
);
}

14
examples/nextjs/src/app/ssr/page.tsx Normal file
View File

@@ -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>
);
}

67
examples/nextjs/src/bknd.ts
View File

@@ -1,68 +1,27 @@
import { App, type LocalApiOptions } from "bknd";
import { type NextjsBkndConfig, getApp as getBkndApp } from "bknd/adapter/nextjs";
import { boolean, em, entity, text } from "bknd/data";
import { secureRandomString } from "bknd/utils";
import { registerLocalMediaAdapter } from "bknd/adapter/node";
import { headers } from "next/headers";
// the em() function makes it easy to create an initial schema
const schema = em({
todos: entity("todos", {
title: text(),
done: boolean()
})
});
// register your schema to get automatic type completion
type Database = (typeof schema)["DB"];
declare module "bknd/core" {
interface DB extends Database {}
}
registerLocalMediaAdapter();
export const config = {
// we can use any libsql config, and if omitted, uses in-memory
connection: {
url: "http://localhost:8080"
// make sure to use a remote URL for production!
url: "file:data.db",
},
// an initial config is only applied if the database is empty
initialConfig: {
data: schema.toJSON(),
// we're enabling auth ...
auth: {
enabled: true,
jwt: {
secret: secureRandomString(64)
}
}
},
options: {
// the seed option is only executed if the database was empty
seed: async (ctx) => {
await ctx.em.mutator("todos").insertMany([
{ title: "Learn bknd", done: true },
{ title: "Build something cool", done: false }
]);
}
},
// here we can hook into the app lifecycle events ...
beforeBuild: async (app) => {
app.emgr.onEvent(
App.Events.AppFirstBoot,
async () => {
// ... to create an initial user
await app.module.auth.createUser({
email: "ds@bknd.io",
password: "12345678"
});
},
"sync"
);
}
} as const satisfies NextjsBkndConfig;
export async function getApp() {
return await getBkndApp(config);
}
export async function getApi(options?: LocalApiOptions) {
export async function getApi(opts?: { verify?: boolean }) {
const app = await getApp();
return await app.getApi(options);
if (opts?.verify) {
const api = app.getApi({ headers: await headers() });
await api.verifyAuth();
return api;
}
return app.getApi();
}

6
examples/nextjs/src/pages/_app.tsx
View File

@@ -1,6 +0,0 @@
import "@/styles/globals.css";
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}

13
examples/nextjs/src/pages/_document.tsx
View File

@@ -1,13 +0,0 @@
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head />
<body className="antialiased">
<Main />
<NextScript />
</body>
</Html>
);
}

27
examples/nextjs/src/pages/admin/[[...admin]].tsx
View File

@@ -1,27 +0,0 @@
import type { InferGetServerSidePropsType as InferProps } from "next";
import dynamic from "next/dynamic";
import { withApi } from "bknd/adapter/nextjs";
import "bknd/dist/styles.css";
const Admin = dynamic(() => import("bknd/ui").then((mod) => mod.Admin), {
ssr: false
});
export const getServerSideProps = withApi(async (context) => {
return {
props: {
user: context.api.getUser()
}
};
});
export default function AdminPage({ user }: InferProps<typeof getServerSideProps>) {
if (typeof document === "undefined") return null;
return (
<Admin
withProvider={{ user }}
config={{ basepath: "/admin", logo_return_path: "/../", color_scheme: "system" }}
/>
);
}

18
examples/nextjs/src/pages/api/[...route].ts
View File

@@ -1,18 +0,0 @@
import { config as bkndConfig } from "@/bknd";
import { serve } from "bknd/adapter/nextjs";
export const config = {
runtime: "edge",
// add a matcher for bknd dist to allow dynamic otherwise build may fail.
// inside this repo it's '../../app/dist/index.js', outside probably inside node_modules
// see https://github.com/vercel/next.js/issues/51401
// and https://github.com/vercel/next.js/pull/69402
unstable_allowDynamic: ["**/*.js"]
};
export default serve({
cleanRequest: {
searchParams: ["route"]
},
...bkndConfig
});

13
examples/nextjs/src/pages/api/hello.ts
View File

@@ -1,13 +0,0 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next";
type Data = {
name: string;
};
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>,
) {
res.status(200).json({ name: "John Doe" });
}

BIN
examples/nextjs/src/pages/fonts/GeistMonoVF.woff
View File

Binary file not shown.

BIN
examples/nextjs/src/pages/fonts/GeistVF.woff
View File

Binary file not shown.

25
examples/nextjs/src/pages/index.tsx
View File

@@ -1,25 +0,0 @@
import { getApi } from "@/bknd";
import type { InferGetServerSidePropsType } from "next";
export const getServerSideProps = async () => {
const api = await getApi();
const { data = [] } = await api.data.readMany("todos");
const user = api.getUser();
return { props: { data, user } };
};
export default function Home({
data,
user
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
return (
<div>
<h1>Data</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
<h1>User</h1>
<pre>{JSON.stringify(user, null, 2)}</pre>
</div>
);
}

21
examples/nextjs/src/styles/globals.css
View File

@@ -1,21 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}