Cloudflare Page Nextjs D1 Tailwindcss Template

Overview

This is a starter template using the following stack:

• Framework - Next.js 14
• Language - TypeScript
• Database - Cloudflare D1

  Love for Cloudflare Community, this made it possible in a simple way

• ORM - Drizzle orm
• Deployment - Cloudflare Pages
• Styling - Tailwind CSS
• Components - Tremor
• Linting - ESLint
• Formatting - Prettier

This template uses the new Next.js App Router. This includes support for enhanced layouts, colocation of components, tests, and styles, component-level data fetching, and more.

Getting Started

Node version: v20.11.0 or later

Install

nvm install 20
nvm use 20
yarn set version 3.x
yarn config set nodeLinker node-modules
yarn install
npx wrangler d1 create demo-from-pages
# Replace the output in `wrangler.toml`

Create migrations

Only if you update app/db/schema.tsx

yarn generate

Apply migrations

Remove --local when you want execute for production

npx wrangler d1 execute demo-from-pages --file=app/db/drizzle/0000_known_fixer.sql --local

Insert a row for testing:

npx wrangler d1 execute demo-from-pages --command  "INSERT INTO users (email, name, username) VALUES ('[email protected]', 'Me', 'username');"  --local

Read

npx wrangler d1 execute demo-from-pages --command  "select * from users limit 1;"

Finally, run the following commands to start the development server:

yarn pages:watch
yarn pages:dev

You should now be able to access the application at http://localhost:3000.

Deploy into Cloudflare Pages

1. Create project in Cloudflare Pages (connect from github and it's okay if the first deployment fails)
2. Set Compatibility flags nodejs_compat
3. Config D1 database bindings (connect one db for each env)

   npx wrangler d1 create demo-from-pages
   

4. Enable cache
5. Retry deploy