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 React Server Components / Server Actions to Cloudflare's serverless platform. It covers setup for both new and existing projects, configuration requirements, development workflows, integration with Cloudflare services (D1, R2, KV, Workers AI), and prevention of 10+ documented errors including worker size limits, runtime compatibility, database connection scoping, and security vulnerabilities. Keywords: Cloudflare Next.js, OpenNext Cloudflare, @opennextjs/cloudflare, Next.js Workers, Next.js App Router Cloudflare, Next.js Pages Router Cloudflare, Next.js SSR Cloudflare, Next.js ISR, server components cloudflare, server actions cloudflare, Next.js middleware workers, nextjs d1, nextjs r2, nextjs kv, Next.js deployment, opennextjs-cloudflare cli, nodejs_compat, worker size limit, next.js runtime compatibility, database connection scoping, Next.js migration cloudflare
Deploy Next.js applications to Cloudflare Workers using the OpenNext adapter for production-ready serverless Next.js hosting.
This skill should be automatically discovered when the user mentions:
Use this skill when:
Deploying Next.js to Cloudflare Workers
Need Next.js Features on Workers
Integrating with Cloudflare Services
Troubleshooting Next.js on Workers
Don't use this skill if:
Building with Vite + React (not Next.js)
→ Use cloudflare-worker-base skill instead
Deploying to Cloudflare Pages (not Workers) → This skill is specifically for Workers deployment
Using static export only (no SSR/ISR) → Consider simpler Workers Static Assets setup
Working with other frameworks (Remix, SvelteKit, etc.) → Refer to framework-specific guides
npm create cloudflare@latest -- my-next-app --framework=next
cd my-next-app
npm run dev # Development
npm run preview # Test in workerd
npm run deploy # Deploy to Cloudflare
npm install --save-dev @opennextjs/cloudflare
# Create wrangler.jsonc and open-next.config.ts
# Update package.json scripts
npm run preview # Test before deploying
npm run deploy # Deploy
setup-new-project.sh - Scaffold new Next.js project with C3setup-existing-project.sh - Add OpenNext adapter to existing projectanalyze-bundle.sh - Debug worker size issueswrangler.jsonc - Complete wrangler configurationopen-next.config.ts - OpenNext adapter configpackage.json - Scripts for dev/preview/deploy.env - Environment variables for package exportstroubleshooting.md - All common errors and solutionsfeature-support.md - Feature compatibility matrixworkflow-diagram.md - Development workflow visualization| Aspect | Standard Next.js | Cloudflare Workers |
|--------|------------------|-------------------|
| Runtime | Node.js or Edge | Node.js (via nodejs_compat) |
| Dev Server | next dev only | next dev + opennextjs-cloudflare preview |
| Worker Size | No limit | 3 MiB (free) / 10 MiB (paid) |
| DB Connections | Global clients OK | Must be request-scoped |
| Image Optimization | Built-in | Via Cloudflare Images |
// wrangler.jsonc (MINIMUM)
{
"compatibility_date": "2025-05-05", // Required for FinalizationRegistry
"compatibility_flags": ["nodejs_compat"] // Required for Node.js runtime
}
Estimated Token Savings: ~59%
| Scenario | Without Skill | With Skill | Savings | |----------|---------------|------------|---------| | New project setup | ~15k tokens | ~6k tokens | ~60% | | Existing migration | ~18k tokens | ~7k tokens | ~61% | | Troubleshooting | ~10k tokens | ~3k tokens | ~70% |
Errors Prevented: 10+ documented issues with sources and solutions
Package Versions (verified 2025-10-21):
@opennextjs/cloudflare: ^1.3.0 (security fix for CVE-2025-6087)next: ^14.2.0 || ^15.0.0wrangler: latestCompatibility Requirements:
compatibility_date: 2025-05-05 minimumcompatibility_flags: ["nodejs_compat"]Next.js Version Support:
✅ Production Ready
Last Updated: 2025-10-21 Skill Version: 1.0.0 License: MIT
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer