DocumentationGetting StartedDeployment

Deployment

Deploy your T3 + Cloudflare application to production with Cloudflare Pages.

Prerequisites

Before deploying, ensure you have:

Cloudflare Pages Setup

1. Install Wrangler

If you haven’t already:

npm install -g wrangler

2. Login to Cloudflare

wrangler login

This will open your browser to authenticate with Cloudflare.

3. Create D1 Database

Create a production database:

wrangler d1 create your-database-name

Note the database ID from the output and add it to wrangler.toml:

[[d1_databases]]
binding = "DB"
database_name = "your-database-name"
database_id = "your-database-id"

4. Run Database Migrations

Apply your migrations to the production database:

wrangler d1 migrations apply your-database-name --remote

5. Create KV Namespace

Create KV namespaces for caching and sessions:

wrangler kv:namespace create "KV"

Add the namespace ID to wrangler.toml:

[[kv_namespaces]]
binding = "KV"
id = "your-kv-namespace-id"

Build and Deploy

Automated Deployment

The easiest way is to connect your Git repository to Cloudflare Pages:

  1. Go to Cloudflare Dashboard
  2. Navigate to Pages
  3. Click Create a project
  4. Connect your Git repository
  5. Configure build settings:
    • Build command: npm run cf:build
    • Build output directory: .vercel/output/static
    • Root directory: /

Manual Deployment

Deploy manually using Wrangler:

# Build the project
npm run cf:build
 
# Deploy to Cloudflare Pages
npm run cf:deploy

Or use the combined command:

wrangler pages deploy .vercel/output/static --project-name your-project-name

Environment Variables

Set production environment variables in Cloudflare Dashboard:

  1. Go to your Pages project
  2. Navigate to Settings → Environment variables
  3. Add the following variables:

Required Variables

AUTH_SECRET=your-production-secret
NEXTAUTH_URL=https://yourdomain.com
DATABASE_URL=your-production-db-url

Optional Variables

STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...

SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=your-email@gmail.com
SMTP_PASSWORD=your-app-password

AUTH_GITHUB_ID=your-github-id
AUTH_GITHUB_SECRET=your-github-secret

Custom Domain

Add Custom Domain

  1. In Cloudflare Pages, go to Custom domains
  2. Click Set up a custom domain
  3. Enter your domain name
  4. Follow the DNS configuration instructions

SSL Certificate

Cloudflare automatically provisions SSL certificates for custom domains. No additional configuration needed!

Stripe Webhooks

Configure Webhook Endpoint

  1. Go to Stripe Dashboard

  2. Navigate to Developers → Webhooks

  3. Click Add endpoint

  4. Enter your webhook URL: https://yourdomain.com/api/webhooks/stripe

  5. Select events to listen to:

    • checkout.session.completed
    • customer.subscription.created
    • customer.subscription.updated
    • customer.subscription.deleted
    • invoice.payment_succeeded
    • invoice.payment_failed

  6. Copy the webhook signing secret and add it to your environment variables as STRIPE_WEBHOOK_SECRET

Monitoring and Logs

View Logs

Check deployment logs in Cloudflare Dashboard:

# Or use Wrangler CLI
wrangler pages deployment tail

Error Tracking

Consider integrating error tracking services:

  • Sentry
  • LogRocket
  • Datadog

Performance Optimization

Enable Caching

Cloudflare Pages automatically caches static assets. For dynamic content, use:

// In your API routes or pages
export const runtime = "edge";
export const revalidate = 3600; // Cache for 1 hour

Image Optimization

Use Next.js Image component with Cloudflare Image Resizing:

import Image from "next/image";
 
<Image
  src="/image.jpg"
  alt="Description"
  width={800}
  height={600}
  loader={({ src, width }) => {
    return `https://yourdomain.com/cdn-cgi/image/width=${width}/${src}`;
  }}
/>;

Rollback

If you need to rollback to a previous deployment:

  1. Go to Cloudflare Pages Dashboard
  2. Navigate to Deployments
  3. Find the deployment you want to rollback to
  4. Click Rollback to this deployment

CI/CD Integration

GitHub Actions

Create .github/workflows/deploy.yml:

name: Deploy to Cloudflare Pages
 
on:
  push:
    branches:
      - main
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 20
 
      - run: npm ci
      - run: npm run cf:build
 
      - name: Deploy to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: your-project-name
          directory: .vercel/output/static

Troubleshooting

Build Failures

If builds fail:

  1. Check build logs in Cloudflare Dashboard
  2. Verify all dependencies are in package.json
  3. Ensure environment variables are set correctly

Database Connection Issues

If you can’t connect to D1:

  1. Verify database binding in wrangler.toml
  2. Check migrations are applied: wrangler d1 migrations list your-database-name --remote
  3. Ensure DATABASE_URL points to the correct database

500 Errors

For server errors:

  1. Check Cloudflare Pages logs
  2. Verify all required environment variables are set
  3. Test locally with production environment variables

Next Steps

ConfigurationAuthentication