cloudflare-nextjs

Name: cloudflare-nextjs
Author: jackspace

15stars7forks

How to install cloudflare-nextjs?

jackspace/claudeskillz/cloudflare-nextjs

$npx -y skills add jackspace/ClaudeSkillz --skill cloudflare-nextjs

Installs into the current project.

Summary

Deploy Next.js applications (App Router and Pages Router) to Cloudflare Workers using the OpenNext adapter. This skill should be used when deploying Next.js apps with SSR, ISR, or server components to Cloudflare's serverless platform. It covers setup for both new and existing pro

Files · 1

View on GitHub

SKILL.md

1	# Cloudflare Next.js Deployment Skill
2
3	Deploy Next.js applications to Cloudflare Workers using the OpenNext Cloudflare adapter for production-ready serverless Next.js hosting.
4
5	## Use This Skill When
6
7	- Deploying Next.js applications (App Router or Pages Router) to Cloudflare Workers
8	- Need server-side rendering (SSR), static site generation (SSG), or incremental static regeneration (ISR) on Cloudflare
9	- Migrating existing Next.js apps from Vercel, AWS, or other platforms to Cloudflare
10	- Building full-stack Next.js applications with Cloudflare services (D1, R2, KV, Workers AI)
11	- Need React Server Components, Server Actions, or Next.js middleware on Workers
12	- Want global edge deployment with Cloudflare's network
13
14	## Key Concepts
15
16	### OpenNext Adapter Architecture
17
18	The OpenNext Cloudflare adapter (`@opennextjs/cloudflare`) transforms Next.js build output into Cloudflare Worker-compatible format. This is fundamentally different from standard Next.js deployments:
19
20	- Node.js Runtime Required: Uses Node.js runtime in Workers (NOT Edge runtime)
21	- Dual Development Workflow: Test in both Next.js dev server AND workerd runtime
22	- Custom Build Pipeline: `next build` → OpenNext transformation → Worker deployment
23	- Cloudflare-Specific Configuration: Requires wrangler.jsonc and open-next.config.ts
24
25	### Critical Differences from Standard Next.js
26
27	\| Aspect \| Standard Next.js \| Cloudflare Workers \|
28	\|--------\|------------------\|-------------------\|
29	\| Runtime \| Node.js or Edge \| Node.js (via nodejs_compat) \|
30	\| Dev Server \| `next dev` \| `next dev` + `opennextjs-cloudflare preview` \|
31	\| Deployment \| Platform-specific \| `opennextjs-cloudflare deploy` \|
32	\| Worker Size \| No limit \| 3 MiB (free) / 10 MiB (paid) \|
33	\| Database Connections \| Global clients OK \| Must be request-scoped \|
34	\| Image Optimization \| Built-in \| Via Cloudflare Images \|
35	\| Caching \| Next.js cache \| OpenNext config + Workers cache \|
36
37	## Setup Patterns
38
39	### New Project Setup
40
41	Use Cloudflare's `create-cloudflare` (C3) CLI to scaffold a new Next.js project pre-configured for Workers:
42
43	```bash
44	npm create cloudflare@latest -- my-next-app --framework=next
45	```
46
47	What this does:
48	1. Runs Next.js official setup tool (`create-next-app`)
49	2. Installs `@opennextjs/cloudflare` adapter
50	3. Creates `wrangler.jsonc` with correct configuration
51	4. Creates `open-next.config.ts` for caching configuration
52	5. Adds deployment scripts to `package.json`
53	6. Optionally deploys immediately to Cloudflare
54
55	Development workflow:
56	```bash
57	npm run dev # Next.js dev server (fast reloads)
58	npm run preview # Test in workerd runtime (production-like)
59	npm run deploy # Build and deploy to Cloudflare
60	```
61
62	### Existing Project Migration
63
64	To add the OpenNext adapter to an existing Next.js application:
65
66	#### 1. Install the adapter
67
68	```bash
69	npm install --save-dev @opennextjs/cloudflare
70	```
71
72	#### 2. Create wrangler.jsonc
73
74	```jsonc
75	{
76	"name": "my-next-app",
77	"compatibility_date": "2025-05-05",
78	"compatibility_flags": ["nodejs_compat"]
79	}
80	```
81
82	Critical configuration:
83	- `compatibility_date`: Minimum `2025-05-05` (for FinalizationRegistry support)
84	- `compatibility_flags`: Must include `nodejs_compat` (for Node.js runtime)
85
86	#### 3. Create open-next.config.ts
87
88	```typescript
89	import { defineCloudflareConfig } from "@opennextjs/cloudflare";
90
91	export default defineCloudflareConfig({
92	// Caching configuration (optional)
93	// See:

People who liked this also viewed

6 picks

Type

cloudflare-nextjs

15stars7forks

View on GitHub

How to install cloudflare-nextjs?

jackspace/claudeskillz/cloudflare-nextjs

$npx -y skills add jackspace/ClaudeSkillz --skill cloudflare-nextjs

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Cloudflare Next.js Deployment Skill
2
3	Deploy Next.js applications to Cloudflare Workers using the OpenNext Cloudflare adapter for production-ready serverless Next.js hosting.
4
5	## Use This Skill When
6
7	- Deploying Next.js applications (App Router or Pages Router) to Cloudflare Workers
8	- Need server-side rendering (SSR), static site generation (SSG), or incremental static regeneration (ISR) on Cloudflare
9	- Migrating existing Next.js apps from Vercel, AWS, or other platforms to Cloudflare
10	- Building full-stack Next.js applications with Cloudflare services (D1, R2, KV, Workers AI)
11	- Need React Server Components, Server Actions, or Next.js middleware on Workers
12	- Want global edge deployment with Cloudflare's network
13
14	## Key Concepts
15
16	### OpenNext Adapter Architecture
17
18	The OpenNext Cloudflare adapter (`@opennextjs/cloudflare`) transforms Next.js build output into Cloudflare Worker-compatible format. This is fundamentally different from standard Next.js deployments:
19
20	- Node.js Runtime Required: Uses Node.js runtime in Workers (NOT Edge runtime)
21	- Dual Development Workflow: Test in both Next.js dev server AND workerd runtime
22	- Custom Build Pipeline: `next build` → OpenNext transformation → Worker deployment
23	- Cloudflare-Specific Configuration: Requires wrangler.jsonc and open-next.config.ts
24
25	### Critical Differences from Standard Next.js
26
27	\| Aspect \| Standard Next.js \| Cloudflare Workers \|
28	\|--------\|------------------\|-------------------\|
29	\| Runtime \| Node.js or Edge \| Node.js (via nodejs_compat) \|
30	\| Dev Server \| `next dev` \| `next dev` + `opennextjs-cloudflare preview` \|
31	\| Deployment \| Platform-specific \| `opennextjs-cloudflare deploy` \|
32	\| Worker Size \| No limit \| 3 MiB (free) / 10 MiB (paid) \|
33	\| Database Connections \| Global clients OK \| Must be request-scoped \|
34	\| Image Optimization \| Built-in \| Via Cloudflare Images \|
35	\| Caching \| Next.js cache \| OpenNext config + Workers cache \|
36
37	## Setup Patterns
38
39	### New Project Setup
40
41	Use Cloudflare's `create-cloudflare` (C3) CLI to scaffold a new Next.js project pre-configured for Workers:
42
43	```bash
44	npm create cloudflare@latest -- my-next-app --framework=next
45	```
46
47	What this does:
48	1. Runs Next.js official setup tool (`create-next-app`)
49	2. Installs `@opennextjs/cloudflare` adapter
50	3. Creates `wrangler.jsonc` with correct configuration
51	4. Creates `open-next.config.ts` for caching configuration
52	5. Adds deployment scripts to `package.json`
53	6. Optionally deploys immediately to Cloudflare
54
55	Development workflow:
56	```bash
57	npm run dev # Next.js dev server (fast reloads)
58	npm run preview # Test in workerd runtime (production-like)
59	npm run deploy # Build and deploy to Cloudflare
60	```
61
62	### Existing Project Migration
63
64	To add the OpenNext adapter to an existing Next.js application:
65
66	#### 1. Install the adapter
67
68	```bash
69	npm install --save-dev @opennextjs/cloudflare
70	```
71
72	#### 2. Create wrangler.jsonc
73
74	```jsonc
75	{
76	"name": "my-next-app",
77	"compatibility_date": "2025-05-05",
78	"compatibility_flags": ["nodejs_compat"]
79	}
80	```
81
82	Critical configuration:
83	- `compatibility_date`: Minimum `2025-05-05` (for FinalizationRegistry support)
84	- `compatibility_flags`: Must include `nodejs_compat` (for Node.js runtime)
85
86	#### 3. Create open-next.config.ts
87
88	```typescript
89	import { defineCloudflareConfig } from "@opennextjs/cloudflare";
90
91	export default defineCloudflareConfig({
92	// Caching configuration (optional)
93	// See:

People who liked this also viewed

6 picks

Type