Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

cjxe/nextjs-d1-drizzle-cloudflare-pages

Repository files navigation

Next.js + Cloudflare D1 SQL + Drizzle ORM + Drizzle Kit + Cloudflare Pages starter kit

Getting started

Prerequisites

  1. Node.js >=v20.11.0
  2. pnpm >=v9.15.1

Initialise the database(s)

  1. Create a production D1 database.

  2. The starter kit focuses on 2 environments, development on local machine and production on remote machine. So, create the following files:

    1. .env.development: duplicate .env.example, and set the variables to development values.
    2. .env.production: duplicate .env.example, and set the variables to production values.
    3. wrangler.toml.development: duplicate wrangler.toml.example, and set the variables to development values.
    4. wrangler.toml.production: duplicate wrangler.toml.example, and set the variables to production values.
  3. Install the app's dependencies:

pnpm install
  1. Generate db migration files (that documents schema changes in an SQL script).
pnpm db:generate
  1. Run db migrations (that executes the SQL script to update the database to match the schema).
  • dev (local) db: pnpm db:migrate:dev
  • prod (remote) db: pnpm db:migrate:prod
  1. View the database using a graphical user interface:
  • dev (local) db: pnpm db:studio:dev
  • prod (remote) db: pnpm db:studio:prod

Run the app

  • Run Next.js on dev. Ideal for development since it supports hot-reload/fast refresh.
pnpm dev

⚠️ Warning: next start will return an error due to how the application is designed to run on Cloudflare pages.

  • Run Cloudflare Pages locally. Ideal to test how the app would work after being deployed.
pnpm pages:dev

⚠️ Warning #1: Connecting to the prod remote db on the local code is not supported.

⚠️ Warning #2: All pages deployed to Cloudflare Pages run on edge runtime, whereas ISR only works on Nodejs runtime (because how Vercel designed their functions); so, some functions like revalidatePath will throw an error when running the app with pnpm pages:dev. But, the functions work as expected after deploying.

Deploy

  • Deploy code to pages:
pnpm pages:deploy

About

"Next.js + Cloudflare D1 + Drizzle ORM + Drizzle Kit + Cloudflare Pages" starter kit

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Contributors 2

AltStyle によって変換されたページ (->オリジナル) /