Full-stack deployment · Cloudflare Pages docs

Typesafe Database Queries With Drizzle and Cloudflare D1 (hrishikeshpathak.com)

Setting up D1 with Drizzle

via CLI:

npx wrangler d1 create <DATABASE_NAME>

returns toml config which is placed in your wrangler.toml file.

binding = "DB" # i.e. available in your Worker on env.DB
database_name = "test-db"
database_id = "d61ce790-55fd-4ec1-8b43-7d3617742a82"

Alternative its via the Cloudflare workers dashbordhttps://dash.cloudflare.com

setup drizzle schema then setup script to generate

        "generate": "drizzle-kit generate:sqlite --schema=./src/schema.ts",

This creates SQL scripts to create the relevant tables. It does not execute it on the table. to do that we run:

npx wrangler d1 execute email-worker --local --file=./drizzle/<DRIZZLE-GENERATED-FILE>>.sql

We not have a fully setup D1 database running locally which we can access in next.js like so:

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

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

export default async function Page(){

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

      {todos.map((todo) => (
        <div key={todo.id}>{todo.text}</div>

my demos: fullstack-next-cloudflare.pages.dev

chiubaca/fullstack-next-cloudflare (github.com)


cant seem instantiate cloudflare with getRequestContext in a way that doesnt make it crash with:

[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.

example project here uses a third party lib to bind next-on-cloudflare-example/src/bindings.ts at main · Rei-x/next-on-cloudflare-example (github.com)

Found this document hidden away next-on-pages/packages/next-on-pages/docs/supported.md at main · cloudflare/next-on-pages (github.com). There are just too many gotchas to make next.js viable on on cloudlflare for now … sad…