How use to D1 and drizzle orm in App router

[chiubaca]

I have a fairly basic demo i'm trying to put together that uses D1 and Drizzle. I'm not quite sure instantiating my d1 database correctly. Here is what I'm trying to do:

import { drizzle } from "drizzle-orm/d1";
import { revalidatePath } from "next/cache";
import { getRequestContext } from "@cloudflare/next-on-pages";

import { todo } from "@/schemas";

export const runtime = "edge";

export default async function Home() {
  const APP_DB = getRequestContext().env.APP_DB;
  const db = drizzle(APP_DB);

  const todos = await db.select().from(todo);

  async function addTodo(formData: FormData) {
    "use server";

    try {
      const formTodo = formData.get("todo") as string;

      await db.insert(todo).values({ text: formTodo, timestamp: Date.now() });
    } catch (error) {
      console.warn("Unhandled error...", error);
    }
  }

  return (
    <main>
      <form action={addTodo}>
        <input name="todo" type="text" />
        <button className="btn" type="submit">
          Add Todo
        </button>
      </form>
      {todos.map((todo) => (
        <div key={todo.id}>{todo.text}</div>
      ))}
    </main>
  );
}

When creating a todo I keep getting this error when submitting a new todo:

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  [function insert]
   ^^^^^^^^^^^^^^^

I can make this error go away by moving these lines outside of the component definition

  const APP_DB = getRequestContext().env.APP_DB;
  const db = drizzle(APP_DB);

like so:

import { drizzle } from "drizzle-orm/d1";
import { revalidatePath } from "next/cache";
import { getRequestContext } from "@cloudflare/next-on-pages";

import { todo } from "@/schemas";

export const runtime = "edge";

const APP_DB = getRequestContext().env.APP_DB;
const db = drizzle(APP_DB);

export default async function Home() {
  const todos = await db.select().from(todo);

  async function addTodo(formData: FormData) {
    "use server";

    try {
      const formTodo = formData.get("todo") as string;

      await db.insert(todo).values({ text: formTodo, timestamp: Date.now() });
    } catch (error) {
      console.warn("Unhandled error...", error);
    }
  }

  return (
    <main>
      <form action={addTodo}>
        <input name="todo" type="text" />
        <button className="btn" type="submit">
          Add Todo
        </button>
      </form>
      {todos.map((todo) => (
        <div key={todo.id}>{todo.text}</div>
      ))}
    </main>
  );
}

This works and my app works locally, however my project no longer builds... And I get this error in my CI:

15:59:57.956 | ▲  Error:
-- | --
15:59:57.956 | ▲  `getRequestContext` is being called at the top level of a route file, this is not supported
15:59:57.957 | ▲  for more details see https://developers.cloudflare.com/pages/framework-guides/nextjs/deploy-a-nextjs-site/#top-level-getrequestcontext

Very confused what I'm doing wrong...

fully reproducible repo : https://github.com/chiubaca/fullstack-next-cloudflare

demo application here using first example : https://fullstack-next-cloudflare.pages.dev/

[harveyjing]

Move the getRequestContext function inside the Home. And use edge runtime.