bump C3's stable create-next-app to 15.0.3 (#7241)

bump C3's `create-next-app` to 15.0.3 for the stable Next.js template, but pin the dependency to `14.2.5` in the experimental template since our open-next adapter doesn't yet have a fully stable and tested support for Next.js 15
cloudflare · Jan 10, 2025 · 9709789 · 9709789
1 parent df56faa
commit 9709789
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 19 deletions.
diff --git a/.changeset/shy-waves-prove.md b/.changeset/shy-waves-prove.md
@@ -0,0 +1,5 @@
+---
+"create-cloudflare": patch
+---
+
+update Next.js template to use Next.js v.15
diff --git a/packages/create-cloudflare/e2e-tests/frameworks.test.ts b/packages/create-cloudflare/e2e-tests/frameworks.test.ts
@@ -484,6 +484,7 @@ function getFrameworkTests(opts: {
 					"--tailwind",
 					"--src-dir",
 					"--app",
+					"--turbopack",
 					"--import-alias",
 					"@/*",
 				],

diff --git a/packages/create-cloudflare/src/frameworks/index.ts b/packages/create-cloudflare/src/frameworks/index.ts
@@ -12,7 +12,9 @@ export const getFrameworkCli = (ctx: C3Context, withVersion = true) => {
 
 	const frameworkCli = ctx.template
 		.frameworkCli as keyof typeof frameworksPackageJson.dependencies;
-	const version = frameworksPackageJson.dependencies[frameworkCli];
+	const version =
+		ctx.template.frameworkCliPinnedVersion ??
+		frameworksPackageJson.dependencies[frameworkCli];
 	return withVersion ? `${frameworkCli}@${version}` : frameworkCli;
 };
 

diff --git a/packages/create-cloudflare/src/frameworks/package.json b/packages/create-cloudflare/src/frameworks/package.json
@@ -10,7 +10,7 @@
 		"@angular/create": "19.0.4",
 		"create-docusaurus": "3.6.3",
 		"create-hono": "0.14.3",
-		"create-next-app": "14.2.5",
+		"create-next-app": "15.0.3",
 		"create-qwik": "1.11.0",
 		"create-vite": "6.0.1",
 		"create-remix": "2.15.1",

diff --git a/packages/create-cloudflare/src/templates.ts b/packages/create-cloudflare/src/templates.ts
@@ -65,16 +65,21 @@ export type TemplateConfig = {
 	 * to handle config version skew between different versions of c3
 	 */
 	configVersion: number;
-	/** The id by which template is referred to internally and keyed in lookup maps*/
+	/** The id by which template is referred to internally and keyed in lookup maps */
 	id: string;
-	/** A string that controls how the template is presented to the user in the selection menu*/
+	/** A string that controls how the template is presented to the user in the selection menu */
 	displayName: string;
-	/** A string that explains what is inside the template, including any resources and how those will be used*/
+	/** A string that explains what is inside the template, including any resources and how those will be used */
 	description?: string;
 	/** The deployment platform for this template */
 	platform: "workers" | "pages";
-	/** The name of the framework cli tool that is used to generate this project or undefined if none. */
+	/** The name of the framework cli tool that is used to generate this project or undefined if none */
 	frameworkCli?: string;
+	/**
+	 * A specific version of the framework cli tool to use instead of the standard one taken from the src/frameworks/package.json
+	 * (which gets managed and bumped by dependabot)
+	 */
+	frameworkCliPinnedVersion?: string;
 	/** When set to true, hides this template from the selection menu */
 	hidden?: boolean;
 	/** Specifies a set of files that will be copied to the project directory during creation.

diff --git a/packages/create-cloudflare/templates-experimental/next/c3.ts b/packages/create-cloudflare/templates-experimental/next/c3.ts
@@ -30,6 +30,10 @@ export default {
 	configVersion: 1,
 	id: "next",
 	frameworkCli: "create-next-app",
+	// TODO: here we need to specify a version of create-next-app which is different from the
+	//       standard one used in the stable Next.js template, that's because our open-next adapter
+	//       is not yet fully ready for Next.js 15, once it is we should remove the following
+	frameworkCliPinnedVersion: "14.2.5",
 	platform: "workers",
 	displayName: "Next (using Node.js compat + Workers Assets)",
 	path: "templates-experimental/next",

diff --git a/packages/create-cloudflare/templates/next/README.md b/packages/create-cloudflare/templates/next/README.md
@@ -46,7 +46,7 @@ In order to enable the example:
   ```ts
   // KV Example:
   ```
-  and uncomment the commented lines below it.
+  and uncomment the commented lines below it (also uncomment the relevant imports).
 - Do the same in the `wrangler.toml` file, where
   the comment is:
   ```

diff --git a/packages/create-cloudflare/templates/next/app/js/app/api/hello/route.js b/packages/create-cloudflare/templates/next/app/js/app/api/hello/route.js
@@ -1,9 +1,9 @@
-import { getRequestContext } from '@cloudflare/next-on-pages'
+// import { getRequestContext } from '@cloudflare/next-on-pages'
 
 export const runtime = 'edge'
 
-export async function GET(request) {
-  let responseText = 'Hello World'
+export async function GET() {
+  const responseText = 'Hello World'
 
   // In the edge runtime you can use Bindings that are available in your application
   // (for more details see:
@@ -15,7 +15,7 @@ export async function GET(request) {
   // const myKv = getRequestContext().env.MY_KV_NAMESPACE
   // await myKv.put('suffix', ' from a KV store!')
   // const suffix = await myKv.get('suffix')
-  // responseText += suffix
+  // return new Response(responseText + suffix)
 
   return new Response(responseText)
 }
diff --git a/packages/create-cloudflare/templates/next/app/ts/app/api/hello/route.ts b/packages/create-cloudflare/templates/next/app/ts/app/api/hello/route.ts
@@ -1,10 +1,9 @@
-import type { NextRequest } from 'next/server'
-import { getRequestContext } from '@cloudflare/next-on-pages'
+// import { getRequestContext } from '@cloudflare/next-on-pages'
 
 export const runtime = 'edge'
 
-export async function GET(request: NextRequest) {
-  let responseText = 'Hello World'
+export async function GET() {
+  const responseText = 'Hello World'
 
   // In the edge runtime you can use Bindings that are available in your application
   // (for more details see:
@@ -16,7 +15,7 @@ export async function GET(request: NextRequest) {
   // const myKv = getRequestContext().env.MY_KV_NAMESPACE
   // await myKv.put('suffix', ' from a KV store!')
   // const suffix = await myKv.get('suffix')
-  // responseText += suffix
+  // return new Response(responseText + suffix)
 
   return new Response(responseText)
 }
diff --git a/packages/create-cloudflare/templates/next/c3.ts b/packages/create-cloudflare/templates/next/c3.ts
@@ -49,10 +49,10 @@ const generate = async (ctx: C3Context) => {
 	updateStatus("Created wrangler.toml file");
 };
 
-const updateNextConfig = () => {
+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);
@@ -107,7 +107,7 @@ const configure = async (ctx: C3Context) => {
 		await writeEslintrc(ctx);
 	}
 
-	updateNextConfig();
+	updateNextConfig(usesTs);
 
 	copyFile(
 		join(getTemplatePath(ctx), "README.md"),