diff --git a/.changeset/orange-ideas-tie.md b/.changeset/orange-ideas-tie.md
new file mode 100644
index 000000000000..2aa50f52bfa2
--- /dev/null
+++ b/.changeset/orange-ideas-tie.md
@@ -0,0 +1,5 @@
+---
+"create-cloudflare": minor
+---
+
+Remove the next-on-pages (Next.js on the Pages platform) option since the package has been deprecated
diff --git a/packages/create-cloudflare/e2e/tests/cli/cli.test.ts b/packages/create-cloudflare/e2e/tests/cli/cli.test.ts
index 0b17ad099af7..4bb54df86f39 100644
--- a/packages/create-cloudflare/e2e/tests/cli/cli.test.ts
+++ b/packages/create-cloudflare/e2e/tests/cli/cli.test.ts
@@ -635,16 +635,20 @@ describe("Create Cloudflare CLI", () => {
});
});
- test("error when trying to create a solid app on Pages", async ({
- logStream,
- }) => {
- const { errors } = await runC3(
- ["--platform=pages", "--framework=solid", "my-app"],
- [],
- logStream,
- );
- expect(errors).toMatch(
- /Error: The .*? framework doesn't support the "pages" platform/,
+ describe("frameworks related", () => {
+ ["solid", "next"].forEach((framework) =>
+ test(`error when trying to create a ${framework} app on Pages`, async ({
+ logStream,
+ }) => {
+ const { errors } = await runC3(
+ ["--platform=pages", `--framework=${framework}`, "my-app"],
+ [],
+ logStream,
+ );
+ expect(errors).toMatch(
+ /Error: The .*? framework doesn't support the "pages" platform/,
+ );
+ }),
);
});
});
diff --git a/packages/create-cloudflare/e2e/tests/frameworks/test-config.ts b/packages/create-cloudflare/e2e/tests/frameworks/test-config.ts
index b8e7d85ad3a8..56429e938d03 100644
--- a/packages/create-cloudflare/e2e/tests/frameworks/test-config.ts
+++ b/packages/create-cloudflare/e2e/tests/frameworks/test-config.ts
@@ -334,27 +334,7 @@ function getFrameworkTestConfig(pm: string): NamedFrameworkTestConfig[] {
nodeCompat: true,
},
{
- 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", "@/*"],
diff --git a/packages/create-cloudflare/templates/next/c3.ts b/packages/create-cloudflare/templates/next/c3.ts
index f5146d4dab04..e0a95f745f17 100644
--- a/packages/create-cloudflare/templates/next/c3.ts
+++ b/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;
diff --git a/packages/create-cloudflare/templates/next/pages/README.md b/packages/create-cloudflare/templates/next/pages/README.md
deleted file mode 100644
index 2f4abb73e75b..000000000000
--- a/packages/create-cloudflare/templates/next/pages/README.md
+++ /dev/null
@@ -1,67 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`c3`](https://developers.cloudflare.com/pages/get-started/c3).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-## Cloudflare integration
-
-Besides the `dev` script mentioned above `c3` has added a few extra scripts that allow you to integrate the application with the [Cloudflare Pages](https://pages.cloudflare.com/) environment, these are:
- - `pages:build` to build the application for Pages using the [`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages) CLI
- - `preview` to locally preview your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
- - `deploy` to deploy your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
-
-> __Note:__ while the `dev` script is optimal for local development you should preview your Pages application as well (periodically or before deployments) in order to make sure that it can properly work in the Pages environment (for more details see the [`@cloudflare/next-on-pages` recommended workflow](https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md#recommended-development-workflow))
-
-### Bindings
-
-Cloudflare [Bindings](https://developers.cloudflare.com/pages/functions/bindings/) are what allows you to interact with resources available in the Cloudflare Platform.
-
-You can use bindings during development, when previewing locally your application and of course in the deployed application:
-
-- To use bindings in dev mode you need to define them in the `next.config.js` file under `setupDevBindings`, this mode uses the `next-dev` `@cloudflare/next-on-pages` submodule. For more details see its [documentation](https://github.com/cloudflare/next-on-pages/blob/05b6256/internal-packages/next-dev/README.md).
-
-- To use bindings in the preview mode you need to add them to the `pages:preview` script accordingly to the `wrangler pages dev` command. For more details see its [documentation](https://developers.cloudflare.com/workers/wrangler/commands/#dev-1) or the [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
-
-- To use bindings in the deployed application you will need to configure them in the Cloudflare [dashboard](https://dash.cloudflare.com/). For more details see the [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
-
-#### KV Example
-
-`c3` has added for you an example showing how you can use a KV binding.
-
-In order to enable the example:
-- Search for javascript/typescript lines containing the following comment:
- ```ts
- // KV Example:
- ```
- and uncomment the commented lines below it (also uncomment the relevant imports).
-- In the `wrangler.jsonc` file add the following configuration line:
- ```
- "kv_namespaces": [{ "binding": "MY_KV_NAMESPACE", "id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" }],
- ```
-- If you're using TypeScript run the `cf-typegen` script to update the `env.d.ts` file:
- ```bash
- npm run cf-typegen
- # or
- yarn cf-typegen
- # or
- pnpm cf-typegen
- # or
- bun cf-typegen
- ```
-
-After doing this you can run the `dev` or `preview` script and visit the `/api/hello` route to see the example in action.
-
-Finally, if you also want to see the example work in the deployed application make sure to add a `MY_KV_NAMESPACE` binding to your Pages application in its [dashboard kv bindings settings section](https://dash.cloudflare.com/?to=/:account/pages/view/:pages-project/settings/functions#kv_namespace_bindings_section). After having configured it make sure to re-deploy your application.
diff --git a/packages/create-cloudflare/templates/next/pages/app/js/app/api/hello/route.js b/packages/create-cloudflare/templates/next/pages/app/js/app/api/hello/route.js
deleted file mode 100644
index 35811c083833..000000000000
--- a/packages/create-cloudflare/templates/next/pages/app/js/app/api/hello/route.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// import { getRequestContext } from '@cloudflare/next-on-pages'
-
-export const runtime = 'edge'
-
-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:
- // - https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-bindings-in-your-nextjs-application
- // - https://developers.cloudflare.com/pages/functions/bindings/
- // )
- //
- // KV Example:
- // const myKv = getRequestContext().env.MY_KV_NAMESPACE
- // await myKv.put('suffix', ' from a KV store!')
- // const suffix = await myKv.get('suffix')
- // return new Response(responseText + suffix)
-
- return new Response(responseText)
-}
diff --git a/packages/create-cloudflare/templates/next/pages/app/js/app/not-found.js b/packages/create-cloudflare/templates/next/pages/app/js/app/not-found.js
deleted file mode 100644
index baf2decacecc..000000000000
--- a/packages/create-cloudflare/templates/next/pages/app/js/app/not-found.js
+++ /dev/null
@@ -1,58 +0,0 @@
-export const runtime = "edge";
-
-export default function NotFound() {
- return (
- <>
- 404: This page could not be found.
-