From 1ea22248b43ca410a8553613d5895a9d074b9572 Mon Sep 17 00:00:00 2001
From: dswbx <dennis.senn@gmx.ch>
Date: Fri, 14 Mar 2025 07:55:05 +0100
Subject: [PATCH] fix nextjs linting hints and improve adapter to support
 config as function

---
 app/src/adapter/nextjs/nextjs.adapter.ts      | 15 +++++--
 examples/nextjs/src/app/(main)/layout.tsx     | 41 +------------------
 examples/nextjs/src/app/(main)/page.tsx       |  2 +-
 examples/nextjs/src/app/(main)/ssr/page.tsx   | 16 ++++----
 examples/nextjs/src/components/Buttons.tsx    | 29 +++++++++++++
 .../src/{app/(main) => components}/Footer.tsx | 13 +++---
 examples/nextjs/src/components/List.tsx       | 11 +++++
 7 files changed, 69 insertions(+), 58 deletions(-)
 create mode 100644 examples/nextjs/src/components/Buttons.tsx
 rename examples/nextjs/src/{app/(main) => components}/Footer.tsx (89%)
 create mode 100644 examples/nextjs/src/components/List.tsx

diff --git a/app/src/adapter/nextjs/nextjs.adapter.ts b/app/src/adapter/nextjs/nextjs.adapter.ts
index 5c2a364..32ff102 100644
--- a/app/src/adapter/nextjs/nextjs.adapter.ts
+++ b/app/src/adapter/nextjs/nextjs.adapter.ts
@@ -1,15 +1,22 @@
 import type { App } from "bknd";
 import { type FrameworkBkndConfig, createFrameworkApp } from "bknd/adapter";
-import { getRuntimeKey, isNode } from "core/utils";
+import { isNode } from "core/utils";
 
 export type NextjsBkndConfig = FrameworkBkndConfig & {
    cleanRequest?: { searchParams?: string[] };
 };
 
+type NextjsContext = {
+   env: Record<string, string | undefined>;
+};
+
 let app: App;
 let building: boolean = false;
 
-export async function getApp(config: NextjsBkndConfig) {
+export async function getApp<Args extends NextjsContext = NextjsContext>(
+   config: NextjsBkndConfig,
+   args?: Args,
+) {
    if (building) {
       while (building) {
          await new Promise((resolve) => setTimeout(resolve, 5));
@@ -19,7 +26,7 @@ export async function getApp(config: NextjsBkndConfig) {
 
    building = true;
    if (!app) {
-      app = await createFrameworkApp(config);
+      app = await createFrameworkApp(config, args);
       await app.build();
    }
    building = false;
@@ -52,7 +59,7 @@ function getCleanRequest(req: Request, cleanRequest: NextjsBkndConfig["cleanRequ
 export function serve({ cleanRequest, ...config }: NextjsBkndConfig = {}) {
    return async (req: Request) => {
       if (!app) {
-         app = await getApp(config);
+         app = await getApp(config, { env: process.env ?? {} });
       }
       const request = getCleanRequest(req, cleanRequest);
       return app.fetch(request);
diff --git a/examples/nextjs/src/app/(main)/layout.tsx b/examples/nextjs/src/app/(main)/layout.tsx
index 6c95ea7..2adcfcf 100644
--- a/examples/nextjs/src/app/(main)/layout.tsx
+++ b/examples/nextjs/src/app/(main)/layout.tsx
@@ -1,6 +1,5 @@
 import Image from "next/image";
-import type { ReactNode } from "react";
-import { Footer } from "./Footer";
+import { Footer } from "@/components/Footer";
 
 export default async function Layout({
    children,
@@ -36,41 +35,3 @@ export default async function Layout({
       </div>
    );
 }
-
-export const Buttons = () => (
-   <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>
-);
-
-export const List = ({ items = [] }: { items: ReactNode[] }) => (
-   <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-      {items.map((item, i) => (
-         <li key={i} className={i < items.length - 1 ? "mb-2" : ""}>
-            {item}
-         </li>
-      ))}
-   </ol>
-);
diff --git a/examples/nextjs/src/app/(main)/page.tsx b/examples/nextjs/src/app/(main)/page.tsx
index c7e2fef..1d736f1 100644
--- a/examples/nextjs/src/app/(main)/page.tsx
+++ b/examples/nextjs/src/app/(main)/page.tsx
@@ -1,7 +1,7 @@
 import { getApi } from "@/bknd";
 import { revalidatePath } from "next/cache";
 import { Fragment } from "react";
-import { List } from "@/app/(main)/layout";
+import { List } from "@/components/List";
 
 export default async function Home() {
    // without "{ verify: true }", this page can be static
diff --git a/examples/nextjs/src/app/(main)/ssr/page.tsx b/examples/nextjs/src/app/(main)/ssr/page.tsx
index c9e858b..1e9b8e5 100644
--- a/examples/nextjs/src/app/(main)/ssr/page.tsx
+++ b/examples/nextjs/src/app/(main)/ssr/page.tsx
@@ -1,5 +1,7 @@
 import { getApi } from "@/bknd";
-import { Buttons, List } from "../layout";
+import { Buttons } from "@/components/Buttons";
+import { List } from "@/components/List";
+import Link from "next/link";
 
 export default async function SSRPage() {
    const api = await getApi({ verify: true });
@@ -11,21 +13,21 @@ export default async function SSRPage() {
          <List items={data.map((todo) => todo.title)} />
          <Buttons />
 
-         <p>
+         <div>
             {user ? (
                <>
                   Logged in as {user.email}.{" "}
-                  <a className="font-medium underline" href="/api/auth/logout">
+                  <Link className="font-medium underline" href="/api/auth/logout">
                      Logout
-                  </a>
+                  </Link>
                </>
             ) : (
                <div className="flex flex-col gap-1">
                   <p>
                      Not logged in.{" "}
-                     <a className="font-medium underline" href="/admin/auth/login">
+                     <Link className="font-medium underline" href="/admin/auth/login">
                         Login
-                     </a>
+                     </Link>
                   </p>
                   <p className="text-xs opacity-50">
                      Sign in with:{" "}
@@ -39,7 +41,7 @@ export default async function SSRPage() {
                   </p>
                </div>
             )}
-         </p>
+         </div>
       </>
    );
 }
diff --git a/examples/nextjs/src/components/Buttons.tsx b/examples/nextjs/src/components/Buttons.tsx
new file mode 100644
index 0000000..32ebdb5
--- /dev/null
+++ b/examples/nextjs/src/components/Buttons.tsx
@@ -0,0 +1,29 @@
+import Image from "next/image";
+
+export const Buttons = () => (
+   <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>
+);
diff --git a/examples/nextjs/src/app/(main)/Footer.tsx b/examples/nextjs/src/components/Footer.tsx
similarity index 89%
rename from examples/nextjs/src/app/(main)/Footer.tsx
rename to examples/nextjs/src/components/Footer.tsx
index e1d3c9b..0c4004e 100644
--- a/examples/nextjs/src/app/(main)/Footer.tsx
+++ b/examples/nextjs/src/components/Footer.tsx
@@ -2,27 +2,28 @@
 
 import Image from "next/image";
 import { usePathname } from "next/navigation";
+import Link from "next/link";
 
 export function Footer() {
    const pathname = usePathname();
 
    return (
       <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-         <a
+         <Link
             className="flex items-center gap-2 hover:underline hover:underline-offset-4"
             href={pathname === "/" ? "/ssr" : "/"}
          >
             <Image aria-hidden src="/file.svg" alt="File icon" width={16} height={16} />
             {pathname === "/" ? "SSR" : "Home"}
-         </a>
-         <a
+         </Link>
+         <Link
             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
+         </Link>
+         <Link
             className="flex items-center gap-2 hover:underline hover:underline-offset-4"
             href="https://bknd.io"
             target="_blank"
@@ -30,7 +31,7 @@ export function Footer() {
          >
             <Image aria-hidden src="/globe.svg" alt="Globe icon" width={16} height={16} />
             Go to bknd.io →
-         </a>
+         </Link>
       </footer>
    );
 }
diff --git a/examples/nextjs/src/components/List.tsx b/examples/nextjs/src/components/List.tsx
new file mode 100644
index 0000000..2aacde8
--- /dev/null
+++ b/examples/nextjs/src/components/List.tsx
@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+export const List = ({ items = [] }: { items: ReactNode[] }) => (
+   <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
+      {items.map((item, i) => (
+         <li key={i} className={i < items.length - 1 ? "mb-2" : ""}>
+            {item}
+         </li>
+      ))}
+   </ol>
+);