Cloudflare Developers•10mo ago

Full-stack deployment · Cloudflare Pages...

Has anyone here successfully ran a next pages app with a D1 db locally? I did follow this setup and configuration: https://developers.cloudflare.com/pages/framework-guides/nextjs/deploy-a-nextjs-site/#use-bindings-in-your-nextjs-application Unfortunately I am not having any luck getting this to run.

Cloudflare Docs

Full-stack deployment · Cloudflare Pages docs

Deploy a full-stack Next.js site.

33 Replies

Dario•10mo ago

What issue are you encountering? 🙂 PS: if you want I would suggest to use the latest version of the guide (which is yet to be published): https://b6f0a2e0.cloudflare-docs-7ou.pages.dev/pages/framework-guides/nextjs/deploy-a-nextjs-site/ (but for that you also need to use the yet to be published version of C3: npx [email protected] --no-auto-update)

Unknown User•10mo ago

Message Not Public

Dario•10mo ago

yes, you can definitely use D1 in page.tsx 🙂 you just need to make sure it's using the edge runtime and you can still access it using process.env.DB if you want, but now the recommended way it though the requestContext function instead 🙂 (getRequestContext().env.DB)

MongyOP•10mo ago

prior to adding D1, to run the app locally I would run pnpm run dev, I followed the guide i mentioned earlier to using '@'cloudflare/pages template. Im at the point of adding a D1 db to the application. I have made a prototype before and works fine when hosted but I didnt bother locally since the prototype was to get comfortable with hosting on cloudflare pages and D1. I have created bindings in the next.config.mjs and env.d.ts the app has a service which is a quick select all from a table and place them in the console env.d.ts

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      D1DB: "f1DB"
    }
  }
}

export {}

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      D1DB: "f1DB"
    }
  }
}

export {}

next.config.mjs

import { setupDevBindings } from '@cloudflare/next-on-pages/next-dev';

/** @type {import('next').NextConfig} */
const nextConfig = {};

if (process.env.NODE_ENV === 'development') {
  await setupDevBindings({
    bindings: {
      D1DB: {
        DB: 'xxxxxx'
      },
    },
  });
}

export default nextConfig;

import { setupDevBindings } from '@cloudflare/next-on-pages/next-dev';

/** @type {import('next').NextConfig} */
const nextConfig = {};

if (process.env.NODE_ENV === 'development') {
  await setupDevBindings({
    bindings: {
      D1DB: {
        DB: 'xxxxxx'
      },
    },
  });
}

export default nextConfig;

service.ts

import {drizzle} from "drizzle-orm/d1";
import {pitStops} from "@/db/schema";

export async function fetchPitStops() {
 try {
   const db = drizzle(context.env.D1DB);
   const results = await db.select().from(pitStops);
   console.log(results);
 }
 catch (error) {
   console.error('Database Error:', error);
 }
}

import {drizzle} from "drizzle-orm/d1";
import {pitStops} from "@/db/schema";

export async function fetchPitStops() {
 try {
   const db = drizzle(context.env.D1DB);
   const results = await db.select().from(pitStops);
   console.log(results);
 }
 catch (error) {
   console.error('Database Error:', error);
 }
}

The error when calling that service during pnpm run dev

Database Error: TypeError: Cannot read properties of undefined (reading 'prepare')

Database Error: TypeError: Cannot read properties of undefined (reading 'prepare')

I will change the configurations around to match the unpublished guide and see what happens

Dario•10mo ago

one sec... you're not setting the binding correctly there in the config file I would suggest adding a // @ts-check at the top of the file, that would show you that you're not passing to getBindingsProxy what it's expecting

Dario•10mo ago

Dario•10mo ago

this is how it should look like

MongyOP•10mo ago

unfortunately the error still persists after adding the // @ts-check Would I need to run wrangler dev at some point?

James•10mo ago

Did you opt your route into the edge runtime?

Dario•10mo ago

ah yeah in the code @Mongy shared there's no runtime export 👍

MongyOP•10mo ago

edge runtime isnt the problem. The app when hosted on cloudflare pages works fine with the bindings attached to it. Just the issue is trying to do it locally so I can avoid having to constantly redeploy for testing I am getting an error that the table im trying to access doesn't exist now this only happens locally the change i did from my original comment was changing the D1DB value from a string to just D1Database env.d.ts

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      D1DB: D1Database;
    }
  }
}

export {}

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      D1DB: D1Database;
    }
  }
}

export {}

This seemed to fix that error i was having earlier. Now the new error is when running locally, any table i try querying doesn't exist.

Dario•10mo ago

@Mongy local bindings exist only locally and do no interact with the production thing in any way, if you're trying to access a table you have in your "real" database that's not going to work, you unfortunately need to re-create the table yourself for local development For example following this: https://developers.cloudflare.com/d1/build-databases/import-data/#import-an-existing-database

Dario•10mo ago

As per our docs: https://developers.cloudflare.com/pages/functions/bindings/

MongyOP•10mo ago

So to clarify. I would need to spin a local D1 and fill the data similar way I did with the hosted version? okay i managed to add a table to a local d1, after running wrangler pages dev src --d1 D1DB=db_id i see the bindings during the local server boot. I go to the url provided and getting a [wrangler:inf] GET / 404 Not Found Context: the nextjs application is using src directory so im not sure if src is the correct file path to provide for wrangler pages dev I do appreciate your assistance @Dario

Dario•10mo ago

yes 👍 why are you running wrangler pages dev src? 🤔 can you share you folder structure? does this work if you run next dev (with either setupDevBindings or setupDevPlatform)? would you be able to share your repo?

MongyOP•10mo ago

https://github.com/A-Cer23/f1-analytics

GitHub

GitHub - A-Cer23/f1-analytics: A web app to visualize F1 data from ...

A web app to visualize F1 data from 1950 - 2023. Contribute to A-Cer23/f1-analytics development by creating an account on GitHub.

MongyOP•10mo ago

running pnpm run dev, any run dev works fine. Once I get to the page where the call is made to the DB i get no table by that name exists.

Dario•10mo ago

@Mongy this seems to work for me

Dario•10mo ago

I think that that's what you set for your preview_id so that's what's been used to generate the data

MongyOP•10mo ago

oh that worked!

Dario•10mo ago

but it doesn't work with setupDevPlatform.... that confused me.... 😕 to be 100% honest I am not that familiar with d1... but I would suggest you to, retry to create the tables without using a preview_id and just see if things work smoothly in that way 🤔

MongyOP•10mo ago

i just run pnpm run dev works fine

Dario•10mo ago

all the Pages integration (setupDevPlatform and wrangler dev) never interact with remote anyways

MongyOP•10mo ago

yeah i didnt think i would have to use wrangler to populate a local d1 instance. Honestly thought wrangler could pull the data that's hosted on the ID and store locally as a D1 instance.

Dario•10mo ago

no I'm sorry that's not currently the case, I would love at some point to implement better tooling to populate the local bindings (which can include pulling the data from remote), but that's currently not the case 😓

MongyOP•10mo ago

It’s alright we make do with what we got. I mean pages and d1 are still babies hahaha. So far been enjoying the development experience.

Dario•10mo ago

I'm glad to hear that, yeah sorry for the small bumps in the road 😅

bun•10mo ago

env.d.ts doesn't seem to work for me getRequestContext().env.DB doesnt exist

import { D1Database } from "@cloudflare/workers-types";

interface CloudflareEnv {
  DB: D1Database;
}

import { D1Database } from "@cloudflare/workers-types";

interface CloudflareEnv {
  DB: D1Database;
}

Dario•10mo ago

Hey @bun, the issue there (I'm pretty sure) is that you're importing D1Database in your d.ts file making it become module scoped (looking for links to share...)

bun•10mo ago

ah true..

Dario•10mo ago

sorry I could not find links to share 😅 (I remember there was a nice stackoverflow thread explaning module vs global 😢) anyways I see that you get it anyways 😃 TLRD; put workers-types in your tsconfig's types or use declare global in the d.ts file 🙂

bun•10mo ago

yeah it works after i deleted the import

Dario•10mo ago

nice! 😄

Gaming

Programming

Full-stack deployment · Cloudflare Pages...