create-cloudflare 0.0.0-ce6d4bc4 → 0.0.0-cfa7de51

package/templates/hello-world-python/py/wrangler.toml

@@ -0,0 +1,108 @@
+#:schema node_modules/wrangler/config-schema.json
+name = "<TBD>"
+main = "src/entry.py"
+compatibility_flags = ["python_workers"]
+compatibility_date = "<TBD>"
+
+# Automatically place your workloads in an optimal location to minimize latency.
+# If you are running back-end logic in a Worker, running it closer to your back-end infrastructure
+# rather than the end user may result in better performance.
+# Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
+# [placement]
+# mode = "smart"
+
+# Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
+# Docs:
+# - https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
+# Note: Use secrets to store sensitive data.
+# - https://developers.cloudflare.com/workers/configuration/secrets/
+# [vars]
+# MY_VARIABLE = "production_value"
+
+# Bind the Workers AI model catalog. Run machine learning models, powered by serverless GPUs, on Cloudflare’s global network
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#workers-ai
+# [ai]
+# binding = "AI"
+
+# Bind an Analytics Engine dataset. Use Analytics Engine to write analytics within your Pages Function.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#analytics-engine-datasets
+# [[analytics_engine_datasets]]
+# binding = "MY_DATASET"
+
+# Bind a headless browser instance running on Cloudflare's global network.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#browser-rendering
+# [browser]
+# binding = "MY_BROWSER"
+
+# Bind a D1 database. D1 is Cloudflare’s native serverless SQL database.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#d1-databases
+# [[d1_databases]]
+# binding = "MY_DB"
+# database_name = "my-database"
+# database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+
+# Bind a dispatch namespace. Use Workers for Platforms to deploy serverless functions programmatically on behalf of your customers.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#dispatch-namespace-bindings-workers-for-platforms
+# [[dispatch_namespaces]]
+# binding = "MY_DISPATCHER"
+# namespace = "my-namespace"
+
+# Bind a Durable Object. Durable objects are a scale-to-zero compute primitive based on the actor model.
+# Durable Objects can live for as long as needed. Use these when you need a long-running "server", such as in realtime apps.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#durable-objects
+# [[durable_objects.bindings]]
+# name = "MY_DURABLE_OBJECT"
+# class_name = "MyDurableObject"
+
+# Durable Object migrations.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#migrations
+# [[migrations]]
+# tag = "v1"
+# new_classes = ["MyDurableObject"]
+
+# Bind a Hyperdrive configuration. Use to accelerate access to your existing databases from Cloudflare Workers.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#hyperdrive
+# [[hyperdrive]]
+# binding = "MY_HYPERDRIVE"
+# id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+
+# Bind a KV Namespace. Use KV as persistent storage for small key-value pairs.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#kv-namespaces
+# [[kv_namespaces]]
+# binding = "MY_KV_NAMESPACE"
+# id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+
+# Bind an mTLS certificate. Use to present a client certificate when communicating with another service.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#mtls-certificates
+# [[mtls_certificates]]
+# binding = "MY_CERTIFICATE"
+# certificate_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+
+# Bind a Queue producer. Use this binding to schedule an arbitrary task that may be processed later by a Queue consumer.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#queues
+# [[queues.producers]]
+# binding = "MY_QUEUE"
+# queue = "my-queue"
+
+# Bind a Queue consumer. Queue Consumers can retrieve tasks scheduled by Producers to act on them.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#queues
+# [[queues.consumers]]
+# queue = "my-queue"
+
+# Bind an R2 Bucket. Use R2 to store arbitrarily large blobs of data, such as files.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#r2-buckets
+# [[r2_buckets]]
+# binding = "MY_BUCKET"
+# bucket_name = "my-bucket"
+
+# Bind another Worker service. Use this binding to call another Worker without network overhead.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#service-bindings
+# [[services]]
+# binding = "MY_SERVICE"
+# service = "my-service"
+
+# Bind a Vectorize index. Use to store and query vector embeddings for semantic search, classification and other vector search use-cases.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#vectorize-indexes
+# [[vectorize]]
+# binding = "MY_INDEX"
+# index_name = "my-index"

package/templates/hono/c3.ts

@@ -1,24 +1,77 @@
 import { logRaw } from "@cloudflare/cli";
-import { runFrameworkGenerator } from "helpers/command";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { spinner } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
+import { loadTemplateSnippets, transformFile } from "helpers/codemod";
+import { detectPackageManager } from "helpers/packageManagers";
 import type { TemplateConfig } from "../../src/templates";
+import type * as recast from "recast";
 import type { C3Context } from "types";
 
 const generate = async (ctx: C3Context) => {
+	const { name: pm } = detectPackageManager();
+
 	await runFrameworkGenerator(ctx, [
 		ctx.project.name,
 		"--template",
 		"cloudflare-workers",
+		"--install",
+		"--pm",
+		pm,
 	]);
 
 	logRaw(""); // newline
 };
 
+const configure = async (ctx: C3Context) => {
+	const indexFile = "src/index.ts";
+
+	const s = spinner();
+	s.start(`Updating \`${indexFile}\``);
+
+	const snippets = loadTemplateSnippets(ctx);
+
+	transformFile(indexFile, {
+		// Insert the env declaration after the last import (but before the rest of the body)
+		visitProgram: function (n) {
+			const lastImportIndex = n.node.body.findLastIndex(
+				(t) => t.type === "ImportDeclaration",
+			);
+			const lastImport = n.get("body", lastImportIndex);
+			lastImport.insertAfter(...snippets.bindingsTypeTs);
+
+			return this.traverse(n);
+		},
+		visitVariableDeclarator(n) {
+			if (n.node.id.type === "Identifier" && n.node.id.name === "app") {
+				n.node.init = snippets
+					.appDeclarationTs[0] as recast.types.namedTypes.NewExpression;
+
+				return false;
+			}
+		},
+	});
+
+	s.stop(`${brandColor("updated")} \`${dim(indexFile)}\``);
+};
+
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "hono",
 	displayName: "Hono",
+	copyFiles: {
+		path: "./templates",
+	},
 	platform: "workers",
 	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			dev: "wrangler dev",
+			deploy: "wrangler deploy --minify",
+			"cf-typegen": "wrangler types --env-interface CloudflareBindings",
+		},
+	}),
 	devScript: "dev",
 	deployScript: "deploy",
 };

package/templates/hono/snippets/appDeclaration.ts

@@ -0,0 +1 @@
+new Hono<{ Bindings: Bindings }>()

package/templates/hono/snippets/bindingsType.ts

@@ -0,0 +1,3 @@
+type Bindings = {
+  [key in keyof CloudflareBindings]: CloudflareBindings[key]
+}

package/templates/hono/templates/worker-configuration.d.ts

@@ -0,0 +1,4 @@
+// Generated by Wrangler
+// After adding bindings to `wrangler.toml`, regenerate this interface via `npm run cf-typegen`
+interface CloudflareBindings {
+}

package/templates/hono/templates/wrangler.toml

@@ -0,0 +1,107 @@
+#:schema node_modules/wrangler/config-schema.json
+name = "<TBD>"
+main = "src/index.ts"
+compatibility_date = "<TBD>"
+
+# Automatically place your workloads in an optimal location to minimize latency.
+# If you are running back-end logic in a Worker, running it closer to your back-end infrastructure
+# rather than the end user may result in better performance.
+# Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
+# [placement]
+# mode = "smart"
+
+# Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
+# Docs:
+# - https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
+# Note: Use secrets to store sensitive data.
+# - https://developers.cloudflare.com/workers/configuration/secrets/
+# [vars]
+# MY_VARIABLE = "production_value"
+
+# Bind the Workers AI model catalog. Run machine learning models, powered by serverless GPUs, on Cloudflare’s global network
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#workers-ai
+# [ai]
+# binding = "AI"
+
+# Bind an Analytics Engine dataset. Use Analytics Engine to write analytics within your Pages Function.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#analytics-engine-datasets
+# [[analytics_engine_datasets]]
+# binding = "MY_DATASET"
+
+# Bind a headless browser instance running on Cloudflare's global network.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#browser-rendering
+# [browser]
+# binding = "MY_BROWSER"
+
+# Bind a D1 database. D1 is Cloudflare’s native serverless SQL database.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#d1-databases
+# [[d1_databases]]
+# binding = "MY_DB"
+# database_name = "my-database"
+# database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+
+# Bind a dispatch namespace. Use Workers for Platforms to deploy serverless functions programmatically on behalf of your customers.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#dispatch-namespace-bindings-workers-for-platforms
+# [[dispatch_namespaces]]
+# binding = "MY_DISPATCHER"
+# namespace = "my-namespace"
+
+# Bind a Durable Object. Durable objects are a scale-to-zero compute primitive based on the actor model.
+# Durable Objects can live for as long as needed. Use these when you need a long-running "server", such as in realtime apps.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#durable-objects
+# [[durable_objects.bindings]]
+# name = "MY_DURABLE_OBJECT"
+# class_name = "MyDurableObject"
+
+# Durable Object migrations.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#migrations
+# [[migrations]]
+# tag = "v1"
+# new_classes = ["MyDurableObject"]
+
+# Bind a Hyperdrive configuration. Use to accelerate access to your existing databases from Cloudflare Workers.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#hyperdrive
+# [[hyperdrive]]
+# binding = "MY_HYPERDRIVE"
+# id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+
+# Bind a KV Namespace. Use KV as persistent storage for small key-value pairs.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#kv-namespaces
+# [[kv_namespaces]]
+# binding = "MY_KV_NAMESPACE"
+# id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+
+# Bind an mTLS certificate. Use to present a client certificate when communicating with another service.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#mtls-certificates
+# [[mtls_certificates]]
+# binding = "MY_CERTIFICATE"
+# certificate_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+
+# Bind a Queue producer. Use this binding to schedule an arbitrary task that may be processed later by a Queue consumer.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#queues
+# [[queues.producers]]
+# binding = "MY_QUEUE"
+# queue = "my-queue"
+
+# Bind a Queue consumer. Queue Consumers can retrieve tasks scheduled by Producers to act on them.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#queues
+# [[queues.consumers]]
+# queue = "my-queue"
+
+# Bind an R2 Bucket. Use R2 to store arbitrarily large blobs of data, such as files.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#r2-buckets
+# [[r2_buckets]]
+# binding = "MY_BUCKET"
+# bucket_name = "my-bucket"
+
+# Bind another Worker service. Use this binding to call another Worker without network overhead.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#service-bindings
+# [[services]]
+# binding = "MY_SERVICE"
+# service = "my-service"
+
+# Bind a Vectorize index. Use to store and query vector embeddings for semantic search, classification and other vector search use-cases.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#vectorize-indexes
+# [[vectorize]]
+# binding = "MY_INDEX"
+# index_name = "my-index"

package/templates/next/README.md

@@ -20,8 +20,8 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 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
-  - `pages:preview` to locally preview your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
-  - `pages:deploy` to deploy your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) 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/05b6256/internal-packages/next-dev/README.md#recommended-workflow))
 
@@ -39,19 +39,30 @@ You can use bindings during development, when previewing locally your applicatio
 
 #### 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 lines containing the following comment:
-```ts
-// KV Example:
-```
-
-and uncomment the commented lines below it.
-
-After doing this you can run the `dev` script and visit the `/api/hello` route to see the example in action.
-
-To then enable such example also in preview mode add a `kv` in the `pages:preview` script like so:
-```diff
--    "pages:preview": "npm run pages:build && wrangler pages dev .vercel/output/static --compatibility-date=2023-12-18 --compatibility-flag=nodejs_compat",
-+    "pages:preview": "npm run pages:build && wrangler pages dev .vercel/output/static --compatibility-date=2023-12-18 --compatibility-flag=nodejs_compat --kv MY_KV",
-```
-
-Finally, if you also want to see the example work in the deployed application make sure to add a `MY_KV` 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.
+`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.
+- Do the same in the `wrangler.toml` file, where
+  the comment is:
+  ```
+  # KV Example:
+  ```
+- 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.

package/templates/next/app/js/app/api/hello/route.js

@@ -1,3 +1,5 @@
+import { getRequestContext } from '@cloudflare/next-on-pages'
+
 export const runtime = 'edge'
 
 export async function GET(request) {
@@ -10,7 +12,7 @@ export async function GET(request) {
   // )
   //
   // KV Example:
-  // const myKv = process.env.MY_KV
+  // const myKv = getRequestContext().env.MY_KV_NAMESPACE
   // await myKv.put('suffix', ' from a KV store!')
   // const suffix = await myKv.get('suffix')
   // responseText += suffix

package/templates/next/app/ts/app/api/hello/route.ts

@@ -1,4 +1,5 @@
 import type { NextRequest } from 'next/server'
+import { getRequestContext } from '@cloudflare/next-on-pages'
 
 export const runtime = 'edge'
 
@@ -12,7 +13,7 @@ export async function GET(request: NextRequest) {
   // )
   //
   // KV Example:
-  // const myKv = process.env.MY_KV
+  // const myKv = getRequestContext().env.MY_KV_NAMESPACE
   // await myKv.put('suffix', ' from a KV store!')
   // const suffix = await myKv.get('suffix')
   // responseText += suffix

package/templates/next/c3.ts

@@ -2,17 +2,20 @@ import { join } from "path";
 import { crash, updateStatus, warn } from "@cloudflare/cli";
 import { processArgument } from "@cloudflare/cli/args";
 import { brandColor, dim } from "@cloudflare/cli/colors";
-import { installPackages, runFrameworkGenerator } from "helpers/command";
+import { spinner } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
 import {
-	compatDateFlag,
 	copyFile,
 	probePaths,
+	readFile,
 	readJSON,
 	usesEslint,
 	usesTypescript,
+	writeFile,
 	writeJSON,
 } from "helpers/files";
-import { detectPackageManager } from "helpers/packages";
+import { detectPackageManager } from "helpers/packageManagers";
+import { installPackages } from "helpers/packages";
 import { getTemplatePath } from "../../src/templates";
 import type { TemplateConfig } from "../../src/templates";
 import type { C3Args, C3Context } from "types";
@@ -23,6 +26,53 @@ const generate = async (ctx: C3Context) => {
 	const projectName = ctx.project.name;
 
 	await runFrameworkGenerator(ctx, [projectName]);
+
+	const wranglerToml = readFile(join(getTemplatePath(ctx), "wrangler.toml"));
+
+	// Note: here we add `# KV Example:` to the toml file for the KV example, we don't actually
+	//       include the comment in the template wrangler.toml file just so to keep it identical
+	//       and consistent with that of all the other frameworks
+	//       (instead of making it a special case which needs extra care)
+	const newTomlContent = wranglerToml.replace(
+		/#\s+\[\[kv_namespaces\]\]\n#\s+binding\s+=\s+"MY_KV_NAMESPACE"\n#\s+id\s+=\s+"[a-zA-Z0-9]+?"/,
+		($1) => `# KV Example:\n${$1}`,
+	);
+
+	if (!/# KV Example/.test(newTomlContent)) {
+		// This should never happen to users, it is a check mostly so that
+		// if the toml file is changed in a way that breaks the "KV Example" addition
+		// the C3 Next.js e2e runs will fail with this
+		crash("Failed to properly generate the wrangler.toml file");
+	}
+
+	writeFile(join(ctx.project.path, "wrangler.toml"), newTomlContent);
+
+	updateStatus("Created wrangler.toml file");
+};
+
+const updateNextConfig = () => {
+	const s = spinner();
+
+	const configFile = "next.config.mjs";
+	s.start(`Updating \`${configFile}\``);
+
+	const configContent = readFile(configFile);
+
+	const updatedConfigFile =
+		`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/5712c57ea7/internal-packages/next-dev/README.md
+		if (process.env.NODE_ENV === 'development') {
+		  await setupDevPlatform();
+		}
+
+		`.replace(/\n\t*/g, "\n") + configContent;
+
+	writeFile(configFile, updatedConfigFile);
+
+	s.stop(`${brandColor(`updated`)} ${dim(`\`${configFile}\``)}`);
 };
 
 const configure = async (ctx: C3Context) => {
@@ -47,7 +97,7 @@ const configure = async (ctx: C3Context) => {
 	if (usesTs) {
 		copyFile(
 			join(getTemplatePath(ctx), "env.d.ts"),
-			join(projectPath, "env.d.ts")
+			join(projectPath, "env.d.ts"),
 		);
 		updateStatus("Created an env.d.ts file");
 	}
@@ -58,15 +108,11 @@ const configure = async (ctx: C3Context) => {
 		await writeEslintrc(ctx);
 	}
 
-	copyFile(
-		join(getTemplatePath(ctx), "next.config.mjs"),
-		join(projectPath, "next.config.mjs")
-	);
-	updateStatus("Updated the next.config.mjs file");
+	updateNextConfig();
 
 	copyFile(
 		join(getTemplatePath(ctx), "README.md"),
-		join(projectPath, "README.md")
+		join(projectPath, "README.md"),
 	);
 	updateStatus("Updated the README file");
 
@@ -74,15 +120,17 @@ const configure = async (ctx: C3Context) => {
 };
 
 export const shouldInstallNextOnPagesEslintPlugin = async (
-	ctx: C3Context
+	ctx: C3Context,
 ): Promise<boolean> => {
 	const eslintUsage = usesEslint(ctx);
 
-	if (!eslintUsage.used) return false;
+	if (!eslintUsage.used) {
+		return false;
+	}
 
 	if (eslintUsage.configType !== ".eslintrc.json") {
 		warn(
-			`Expected .eslintrc.json from Next.js scaffolding but found ${eslintUsage.configType} instead`
+			`Expected .eslintrc.json from Next.js scaffolding but found ${eslintUsage.configType} instead`,
 		);
 		return false;
 	}
@@ -129,8 +177,6 @@ export default {
 	id: "next",
 	platform: "pages",
 	displayName: "Next",
-	devScript: "dev",
-	previewScript: "pages:preview",
 	generate,
 	configure,
 	copyFiles: {
@@ -164,7 +210,7 @@ export default {
 			},
 		},
 	},
-	transformPackageJson: async () => {
+	transformPackageJson: async (_, ctx) => {
 		const isNpm = npm === "npm";
 		const isBun = npm === "bun";
 		const isNpmOrBun = isNpm || isBun;
@@ -177,20 +223,16 @@ export default {
 		return {
 			scripts: {
 				"pages:build": `${pmCommand} ${nextOnPagesCommand}`,
-				"pages:preview": `${pagesBuildRunCommand} && wrangler pages dev .vercel/output/static ${await compatDateFlag()} --compatibility-flag=nodejs_compat`,
-				"pages:deploy": `${pagesBuildRunCommand} && wrangler pages deploy .vercel/output/static`,
+				preview: `${pagesBuildRunCommand} && wrangler pages dev`,
+				deploy: `${pagesBuildRunCommand} && wrangler pages deploy`,
+				...(usesTypescript(ctx) && {
+					"cf-typegen": `wrangler types --env-interface CloudflareEnv env.d.ts`,
+				}),
 			},
 		};
 	},
-	testFlags: [
-		"--typescript",
-		"--no-install",
-		"--eslint",
-		"--tailwind",
-		"--src-dir",
-		"--app",
-		"--import-alias",
-		"@/*",
-	],
+	devScript: "dev",
+	previewScript: "preview",
+	deployScript: "deploy",
 	compatibilityFlags: ["nodejs_compat"],
 } as TemplateConfig;

package/templates/next/env.d.ts

@@ -1,13 +1,5 @@
-declare global {
-  namespace NodeJS {
-    interface ProcessEnv {
-      // Add here the Cloudflare Bindings you want to have available in your application
-      // (for more details on Bindings see: https://developers.cloudflare.com/pages/functions/bindings/)
-      //
-      // KV Example:
-      // MY_KV: KVNamespace
-    }
-  }
-}
+// Generated by Wrangler
+// by running `wrangler types --env-interface CloudflareEnv env.d.ts`
 
-export {}
+interface CloudflareEnv {
+}

package/templates/next/pages/js/pages/api/hello.js

@@ -1,3 +1,5 @@
+import { getRequestContext } from '@cloudflare/next-on-pages'
+
 export const config = {
   runtime: 'edge',
 }
@@ -12,7 +14,7 @@ export default async function handler(req) {
   // )
   //
   // KV Example:
-  // const myKv = process.env.MY_KV
+  // const myKv = getRequestContext().env.MY_KV_NAMESPACE
   // await myKv.put('suffix', ' from a KV store!')
   // const suffix = await myKv.get('suffix')
   // responseText += suffix

package/templates/next/pages/ts/pages/api/hello.ts

@@ -1,4 +1,5 @@
 import type { NextRequest } from 'next/server'
+import { getRequestContext } from '@cloudflare/next-on-pages'
 
 export const config = {
   runtime: 'edge',
@@ -14,7 +15,7 @@ export default async function handler(req: NextRequest) {
   // )
   //
   // KV Example:
-  // const myKv = process.env.MY_KV
+  // const myKv = getRequestContext().env.MY_KV_NAMESPACE
   // await myKv.put('suffix', ' from a KV store!')
   // const suffix = await myKv.get('suffix')
   // responseText += suffix