Next.js + Drizzle + Supabase + Cloudflare Pages

This is a modern web application built with Next.js, using Drizzle ORM with Supabase as the database, and deployed on Cloudflare Pages.

Prerequisites

• Node.js 18 or later
• npm or yarn
• Supabase account
• Cloudflare account

Environment Variables

Create a .env.local file in the root directory with the following variables:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Installation

1. Clone the repository:

git clone <your-repo-url>
cd next-drizzle-supabase

2. Install dependencies:

npm install

Code Quality and Formatting

This project uses several tools to ensure code quality and consistent formatting:

1. Prettier for code formatting:

   npm run format        # Format all files

2. ESLint for code linting:

   npm run lint         # Run ESLint

3. Git Hooks (using Husky):

   • Pre-commit hook automatically formats and lints staged files
   • Ensures consistent code style across the team
   • Prevents commits with formatting issues

The following files are automatically formatted on commit:

• JavaScript/TypeScript files (.js, .jsx, .ts, .tsx)
• Configuration files (.json, .yml)
• Markdown files (.md)

To manually run formatting checks:

npx lint-staged    # Check staged files only
npm run format     # Format all files

UI Components with shadcn/ui

This project uses shadcn/ui for beautiful and accessible components. To add new components:

1. Install the shadcn CLI:

npm install -D @shadcn/ui

2. Initialize shadcn/ui (if not already initialized):

npx shadcn-ui@latest init

3. Add new components as needed:

npx shadcn-ui@latest add [component-name]
# For example:
npx shadcn-ui@latest add button
npx shadcn-ui@latest add dialog

Available components can be found at shadcn/ui website

Font Optimization

This project uses next/font for optimized font loading:

• Inter for main text (sans-serif)
• JetBrains Mono for monospace text

Benefits:

• Zero layout shift
• Built-in performance optimizations
• Self-hosted fonts (no external requests)
• Automatic font subsetting

Usage in components:

// Default text uses Inter
<p>This uses Inter font</p>

// For monospace text
<code className="font-mono">This uses JetBrains Mono</code>

Font configuration can be found in src/lib/fonts.ts.

Development

Run the development server:

npm run dev

Generate Drizzle migrations:

npm run generate

Introspect database:

npm run introspect

Cloudflare Pages Deployment

1. Install Cloudflare Pages dependencies:

npm install --save-dev @cloudflare/next-on-pages wrangler

2. Build for Cloudflare Pages:

npm run pages:build

3. Login to Cloudflare (if not already):

npx wrangler login

4. Deploy to Cloudflare Pages:

npm run pages:deploy

Available Scripts

• npm run dev - Start development server
• npm run build - Build the application
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run generate - Generate Drizzle migrations
• npm run introspect - Introspect database schema
• npm run pages:build - Build for Cloudflare Pages
• npm run pages:deploy - Deploy to Cloudflare Pages
• npm run pages:watch - Watch mode for Cloudflare Pages
• npm run pages:dev - Local development with Cloudflare Pages

Project Structure

├── src/
│   ├── app/          # Next.js app directory
│   ├── components/   # React components
│   ├── lib/          # Utility functions and configurations
│   ├── providers/    # React context providers
│   └── db/          # Database schemas and configurations
├── .cloudflare/     # Cloudflare configuration
├── public/          # Static assets
└── package.json     # Project dependencies and scripts

Important Notes

1. When deploying to Cloudflare Pages, make sure to:

   • Add your environment variables in the Cloudflare Pages dashboard
   • Configure your custom domain if needed
   • Set up any required build settings

2. For local development with Cloudflare Pages:

   npm run pages:dev

3. To watch for changes during development:

   npm run pages:watch

Tech Stack

• Next.js
• Drizzle ORM
• Supabase
• Cloudflare Pages
• TypeScript
• Tailwind CSS
• Radix UI

Features

• Authentication using Supabase Auth
• File Uploads using Supabase Storage
• Database access with Drizzle ORM
• Full Row Level Security (RLS) support
• Dark Mode with Theme Provider
• Form state management using the new useFormState and useFormStatus hooks
• Fully responsive design using Tailwind CSS

Set up database user that respects RLS and grant access to all tables

create role app_user with login password 'app_user';
grant select, insert, update, delete on all tables in schema public to app_user;
alter default privileges in schema public grant select, insert, update, delete on tables to app_user;

Manually enable RLS policies after creating tables

Use the dashboard to enable RLS policies for each table.

Set up Storage

• Create a new storage bucket and set the STORAGE_BUCKET environment variable to the bucket name.
• Create the following storage policies for the bucket:

Access own files

• Name: Access own files
• Allowed operation: SELECT
• Target roles: (default)
• Policy definition:

bucket_id = 'Files' and owner_id = auth.uid()::text and (storage.foldername(name))[1] = auth.uid()::text

Allow upload

• Name: Allow upload
• Allowed operation: INSERT
• Target roles: (default)
• Policy definition:

bucket_id = 'Files' and (storage.foldername(name))[1] = auth.uid()::text

Delete own files

• Name: Delete own files
• Allowed operation: `