diff --git a/.changeset/shy-waves-prove.md b/.changeset/shy-waves-prove.md new file mode 100644 index 000000000000..0a1026f99ac4 --- /dev/null +++ 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 index a0415af994f5..7bc9edcca872 100644 --- 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 index 5ba831072e34..534f74ad5737 100644 --- 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 index c7eb0ab9d5af..55cf0ccc3ea9 100644 --- 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.0", diff --git a/packages/create-cloudflare/src/templates.ts b/packages/create-cloudflare/src/templates.ts index 1679e9068c6f..648aca91cbec 100644 --- 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 index 94e6274c00e8..3447e5fbb699 100644 --- 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 index 36c880281fb0..e5ee722e50c3 100644 --- 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 index 67a9f5358f5e..35811c083833 100644 --- 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 index b8e5945b4876..35811c083833 100644 --- 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 index 03a3dee77914..61447f4972e5 100644 --- 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"),