[create-cloudflare] next.js with ts fix

.changeset/famous-coats-admire.md

@@ -0,0 +1,7 @@
+---
+"create-cloudflare": patch
+---
+
+# \[create-cloudflare\] next.js with ts fix #7854
+
+Removed top-level await in next.config.ts

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

@@ -8,7 +8,6 @@ import {
 	probePaths,
 	readFile,
 	readJSON,
-	removeFile,
 	usesEslint,
 	usesTypescript,
 	writeFile,
@@ -32,55 +31,27 @@ const generate = async (ctx: C3Context) => {
 	updateStatus("Created wrangler.json file");
 };
 
-const setupDevPlatformCode =
-	`import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';
-
-	// Here we use the @cloudflare/next-on-pages next-dev module to allow us to
-	// use bindings during local development (when running the application with \`next dev\`).
-	// For more information see:
-	// https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md
-	if (process.env.NODE_ENV === 'development') {
-		await setupDevPlatform();
-	}
-
-	`.replace(/\n\t*/g, "\n");
-
-const updateNextJsConfig = () => {
+const updateNextConfig = (usesTs: boolean) => {
 	const s = spinner();
 
-	const configFile = `next.config.mjs`;
+	const configFile = `next.config.${usesTs ? "ts" : "mjs"}`;
 	s.start(`Updating \`${configFile}\``);
 
 	const configContent = readFile(configFile);
 
-	const updatedConfigFile = setupDevPlatformCode + configContent;
+	const updatedConfigFile =
+		`import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';
 
-	writeFile(configFile, updatedConfigFile);
-
-	s.stop(`${brandColor(`Updated`)} ${dim(`\`${configFile}\``)}`);
-};
+		// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
+		// (when running the application with \`next dev\`) and has no effect outside of development, for more information see:
+		// https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md
+		setupDevPlatform().catch(console.error);
 
-const updateNextTsConfig = () => {
-	const s = spinner();
+		`.replace(/\n\t*/g, "\n") + configContent;
 
-	const oldConfigFile = `next.config.ts`;
-	const newConfigFile = `next.config.mjs`;
-
-	s.start(`Removing \`${oldConfigFile}\``);
-
-	const updatedConfigFile = setupDevPlatformCode +
-	`/** @type {import('next').NextConfig} */
-	const nextConfig = {
-	  /* config options here */
-	};
-
-	export default nextConfig;
-	`.replace(/\n\t*/g, "\n");
-
-	removeFile(oldConfigFile);
-	writeFile(newConfigFile, updatedConfigFile);
+	writeFile(configFile, updatedConfigFile);
 
-	s.stop(`${brandColor(`Created`)} ${dim(`\`${newConfigFile}\``)}`);
+	s.stop(`${brandColor(`updated`)} ${dim(`\`${configFile}\``)}`);
 };
 
 const configure = async (ctx: C3Context) => {
@@ -116,11 +87,7 @@ const configure = async (ctx: C3Context) => {
 		await writeEslintrc(ctx);
 	}
 
-	if (usesTs) {
-		updateNextTsConfig();
-	} else {
-		updateNextJsConfig();
-	}
+	updateNextConfig(usesTs);
 
 	copyFile(
 		join(getTemplatePath(ctx), "README.md"),