Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
# next.js
/.next/
/out/
/.open-next/

# production
/build
Expand Down
43 changes: 28 additions & 15 deletions CLOUDFLARE_SETUP.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Cloudflare Pages Deployment Guide

This guide covers deploying the COC Website to Cloudflare Pages using `@cloudflare/next-on-pages`.
This guide covers deploying the COC Website to Cloudflare Pages using OpenNext Cloudflare adapter.

## Prerequisites

Expand Down Expand Up @@ -59,17 +59,16 @@ For local testing with Wrangler:

3. Run the development server:
```bash
npx wrangler pages dev -- npm run dev
npx wrangler dev
```

### 5. Deploy to Cloudflare Pages

#### Option A: Direct Upload (Recommended for CI/CD)
#### Option A: Direct Upload (Recommended)

```bash
npm run build
npx @cloudflare/next-on-pages@1
npx wrangler pages deploy .vercel/output --project-name=coc-website
npm run build:cf
npx wrangler pages deploy .open-next --project-name=coc-website
```

#### Option B: GitHub Integration
Expand All @@ -78,8 +77,8 @@ npx wrangler pages deploy .vercel/output --project-name=coc-website
2. Navigate to **Pages** → **Create a project**
3. Connect your GitHub repository
4. Configure build settings:
- **Build command**: `npx @cloudflare/next-on-pages@1`
- **Build output directory**: `.vercel/output/static`
- **Build command**: `npm run build:cf`
- **Build output directory**: `.open-next`
- **Root directory**: `/`
5. Add all secrets in **Settings** → **Environment variables** → **Production** → **Add variable**

Expand Down Expand Up @@ -118,9 +117,9 @@ npx wrangler secret put <SECRET_NAME>

### Middleware Issues

The middleware uses Supabase for authentication. Ensure:
- `SUPABASE_SERVICE_ROLE_KEY` is correctly set as a secret
- Your Supabase project is accessible from Cloudflare's edge network
The middleware uses NextAuth for authentication. Ensure:
- `NEXTAUTH_SECRET` is correctly set as a secret
- Your authentication provider is properly configured

### Worker Size Limit Exceeded

Expand All @@ -135,7 +134,8 @@ If your build exceeds Cloudflare's worker size limit:
```
├── .dev.vars.example # Template for local development variables
├── wrangler.toml # Cloudflare Pages configuration
├── next.config.mjs # Next.js config (standalone output disabled for Cloudflare)
├── open-next.config.ts # OpenNext configuration
├── next.config.mjs # Next.js config
└── middleware.ts # Edge middleware for auth protection
```

Expand All @@ -146,16 +146,26 @@ If your build exceeds Cloudflare's worker size limit:
```toml
name = "coc-website"
compatibility_flags = ["nodejs_compat"]
compatibility_date = "2025-01-01"
compatibility_date = "2026-02-01"

[build]
command = "npx @cloudflare/next-on-pages@1"
command = "npm run build && npx @opennextjs/cloudflare build"

[vars]
NODE_VERSION = "22"
NEXT_OUTPUT_STANDALONE = "false"
```

### open-next.config.ts

```typescript
import { defineCloudflareConfig } from "@opennextjs/cloudflare";

export default defineCloudflareConfig({
// Default configuration for Cloudflare Pages
});
```

### next.config.mjs

The `output: 'standalone'` setting is disabled for Cloudflare builds. It's only enabled for Docker deployments via the `NEXT_OUTPUT_STANDALONE` environment variable.
Expand All @@ -174,10 +184,13 @@ npx wrangler tail

# Open project in browser
npx wrangler pages project open coc-website

# Local development
npx wrangler dev
```

## Additional Resources

- [Cloudflare Pages Documentation](https://developers.cloudflare.com/pages/)
- [next-on-pages GitHub](https://github.com/cloudflare/next-on-pages)
- [OpenNext Cloudflare](https://opennext.js.org/cloudflare)
- [Wrangler CLI Docs](https://developers.cloudflare.com/workers/wrangler/)
3 changes: 2 additions & 1 deletion app/api/resources/[domain]/route.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import { NextResponse } from 'next/server';
import { NextRequest } from 'next/server';
import resources from '@/data/resources.json';

export const runtime = 'edge';
// Removed edge runtime for OpenNext Cloudflare compatibility
// export const runtime = 'edge';


export async function GET(
Expand Down
3 changes: 2 additions & 1 deletion app/api/resources/route.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { NextResponse } from 'next/server';

export const runtime = 'edge';
// Removed edge runtime for OpenNext Cloudflare compatibility
// export const runtime = 'edge';

const resources = {
"cp": [],
Expand Down
2 changes: 2 additions & 0 deletions next-on-pages.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
[build]
command = "npm run build"
6 changes: 6 additions & 0 deletions open-next.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { defineCloudflareConfig } from "@opennextjs/cloudflare";

export default defineCloudflareConfig({
// Use default configuration
// For Next.js 16 compatibility
});
Loading
Loading