C3: Remove the next-on-pages (Next.js on the Pages platform) option since the package has been deprecated

Author: dario-piotrowicz

.changeset/orange-ideas-tie.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": patch
+---
+
+Remove the next-on-pages (Next.js on the Pages platform) option since the package has been deprecated

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

@@ -372,27 +372,7 @@ function getFrameworkTestConfig(pm: string): NamedFrameworkTestConfig[] {
 			flags: ["--typescript", "--no-install", "--no-git-init"],
 		},
 		{
-			name: "next:pages",
-			argv: ["--platform", "pages"],
-			timeout: LONG_TIMEOUT,
-			testCommitMessage: true,
-			verifyDeploy: {
-				route: "/",
-				expectedText: "Create Next App",
-			},
-			// see https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/docs/supported.md#operating-systems
-			unsupportedOSs: ["win32"],
-			verifyPreview: {
-				previewArgs: ["--inspector-port=0"],
-				route: "/",
-				expectedText: "Create Next App",
-			},
-			nodeCompat: true,
-			flags: ["--yes", "--no-install", "--import-alias", "@/*"],
-		},
-		{
-			name: "next:workers",
-			argv: ["--platform", "workers"],
+			name: "next",
 			timeout: LONG_TIMEOUT,
 			testCommitMessage: true,
 			flags: ["--yes", "--import-alias", "@/*"],

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

@@ -1,9 +1,70 @@
-import pages from "./pages/c3";
-import workers from "./workers/c3";
-import type { MultiPlatformTemplateConfig } from "../../src/templates";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { spinner } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
+import { readFile, usesTypescript, writeFile } from "helpers/files";
+import { installPackages } from "helpers/packages";
+import type { TemplateConfig } from "../../src/templates";
+import type { C3Context } from "types";
 
-const config: MultiPlatformTemplateConfig = {
-	displayName: "Next.js",
-	platformVariants: { pages, workers },
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, [ctx.project.name]);
+};
+
+const configure = async (ctx: C3Context) => {
+	await installPackages(["@opennextjs/cloudflare@^1.3.0"], {
+		startText: "Adding the Cloudflare adapter",
+		doneText: `${brandColor(`installed`)} @opennextjs/cloudflare)}`,
+	});
+
+	const usesTs = usesTypescript(ctx);
+
+	updateNextConfig(usesTs);
+};
+
+const updateNextConfig = (usesTs: boolean) => {
+	const s = spinner();
+
+	const configFile = `next.config.${usesTs ? "ts" : "mjs"}`;
+	s.start(`Updating \`${configFile}\``);
+
+	const configContent = readFile(configFile);
+
+	const updatedConfigFile =
+		configContent +
+		`
+		// added by create cloudflare to enable calling \`getCloudflareContext()\` in \`next dev\`
+		import { initOpenNextCloudflareForDev } from '@opennextjs/cloudflare';
+		initOpenNextCloudflareForDev();
+		`.replace(/\n\t*/g, "\n");
+
+	writeFile(configFile, updatedConfigFile);
+
+	s.stop(`${brandColor(`updated`)} ${dim(`\`${configFile}\``)}`);
 };
-export default config;
+
+const envInterfaceName = "CloudflareEnv";
+const typesPath = "./cloudflare-env.d.ts";
+export default {
+	configVersion: 1,
+	id: "next",
+	frameworkCli: "create-next-app",
+	platform: "workers",
+	displayName: "Next.js",
+	copyFiles: {
+		path: "./templates",
+	},
+	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `opennextjs-cloudflare build && opennextjs-cloudflare deploy`,
+			preview: `opennextjs-cloudflare build && opennextjs-cloudflare preview`,
+			"cf-typegen": `wrangler types --env-interface ${envInterfaceName} ${typesPath}`,
+		},
+	}),
+	devScript: "dev",
+	previewScript: "preview",
+	deployScript: "deploy",
+	typesPath,
+	envInterfaceName,
+} as TemplateConfig;