fix and update experimental Next.js template to work on @opennextjs/[email protected] (#7638)

* update the experimental Next.js template to work on `@opennextjs/[email protected]`
* include `.dev.vars` template file
* skip bun and yarn experimental e2es

Author: dario-piotrowicz

.changeset/gorgeous-kids-protect.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": patch
+---
+
+fix and update experimental Next.js template to work on `@opennextjs/[email protected]`

packages/create-cloudflare/.gitignore

@@ -13,5 +13,8 @@ templates*/**/pnpm-lock.yaml
 # the build step renames .gitignore files to __dot__gitignore
 templates*/**/__dot__gitignore
 
+# include .dev.vars template files
+!templates*/**/.dev.vars
+
 scripts/snippets
 !scripts/snippets/.gitkeep

packages/create-cloudflare/e2e-tests/frameworks.test.ts

@@ -188,6 +188,11 @@ function getFrameworkTests(opts: {
 					expectedText: "Create Next App",
 				},
 				unsupportedOSs: ["win32"],
+				unsupportedPms: [
+					// bun and yarn are failing in CI
+					"bun",
+					"yarn",
+				],
 			},
 			nuxt: {
 				testCommitMessage: true,

packages/create-cloudflare/templates-experimental/next/c3.ts

@@ -19,7 +19,7 @@ const generate = async (ctx: C3Context) => {
 
 const configure = async () => {
 	const packages = [
-		"@opennextjs/cloudflare@0.2.x",
+		"@opennextjs/cloudflare@0.3.x",
 		"@cloudflare/workers-types",
 	];
 	await installPackages(packages, {
@@ -47,8 +47,8 @@ export default {
 	configure,
 	transformPackageJson: async () => ({
 		scripts: {
-			deploy: `cloudflare && wrangler deploy`,
-			preview: `cloudflare && wrangler dev`,
+			deploy: `opennextjs-cloudflare && wrangler deploy`,
+			preview: `opennextjs-cloudflare && wrangler dev`,
 			"cf-typegen": `wrangler types --env-interface CloudflareEnv env.d.ts`,
 		},
 	}),

packages/create-cloudflare/templates-experimental/next/templates/.dev.vars

@@ -0,0 +1,2 @@
+# Load .env.development* files when running `wrangler dev`
+NEXTJS_ENV=development

packages/create-cloudflare/templates-experimental/next/templates/.gitignore

@@ -35,8 +35,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-
-# Cloudflare related
-/.save.next
-/.worker-next
-/.wrangler
+# OpenNext
+/.open-next

packages/create-cloudflare/templates-experimental/next/templates/open-next.config.ts

@@ -0,0 +1,28 @@
+import cache from "@opennextjs/cloudflare/kvCache";
+
+const config = {
+  default: {
+    override: {
+      wrapper: "cloudflare-node",
+      converter: "edge",
+      incrementalCache: async () => cache,
+      tagCache: "dummy",
+      queue: "dummy",
+    },
+  },
+
+  middleware: {
+    external: true,
+    override: {
+      wrapper: "cloudflare-edge",
+      converter: "edge",
+      proxyExternalRequest: "fetch",
+    },
+  },
+
+  dangerous: {
+    enableCacheInterception: false,
+  },
+};
+
+export default config;

packages/create-cloudflare/templates-experimental/next/templates/wrangler.toml

@@ -1,6 +1,6 @@
 #:schema node_modules/wrangler/config-schema.json
 name = "<app-name>"
-main = ".worker-next/index.mjs"
+main = ".open-next/worker.js"
 
 compatibility_date = "2024-09-26"
 compatibility_flags = ["nodejs_compat"]
@@ -9,4 +9,4 @@ compatibility_flags = ["nodejs_compat"]
 minify = true
 
 # Use the new Workers + Assets to host the static frontend files
-assets = { directory = ".worker-next/assets", binding = "ASSETS" }
+assets = { directory = ".open-next/assets", binding = "ASSETS" }