Merge remote-tracking branch 'origin/main' into cloudflare

https://github.com/vercel/next.js/discussions/50177

dev.vars.example

@@ -0,0 +1 @@
+NEXTJS_ENV=development

next.config.ts

@@ -18,6 +18,18 @@ const nextConfig: NextConfig = {
     // removeConsole: process.env.NODE_ENV === 'production',
   },
 
+  // https://github.com/vercel/next.js/discussions/50177#discussioncomment-6006702
+  // fix build error: Module build failed: UnhandledSchemeError:
+  // Reading from "cloudflare:sockets" is not handled by plugins (Unhandled scheme).
+  webpack: (config, { webpack }) => {
+    config.plugins.push(
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^pg-native$|^cloudflare:sockets$/,
+      })
+    );
+    return config;
+  },
+
   images: {
     // https://vercel.com/docs/image-optimization/managing-image-optimization-costs#minimizing-image-optimization-costs
     // https://nextjs.org/docs/app/api-reference/components/image#unoptimized
@@ -70,3 +82,9 @@ const withNextIntl = createNextIntlPlugin();
 const withMDX = createMDX();
 
 export default withMDX(withNextIntl(nextConfig));
+
+// https://opennext.js.org/cloudflare/get-started#12-develop-locally
+import { initOpenNextCloudflareForDev } from '@opennextjs/cloudflare';
+
+// during local development, to access in any of your server code, local versions of Cloudflare bindings
+initOpenNextCloudflareForDev();

open-next.config.ts

@@ -0,0 +1,6 @@
+import { defineCloudflareConfig } from "@opennextjs/cloudflare";
+
+
+export default defineCloudflareConfig({
+
+});

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "cf-dev": "next dev -p 8787",
     "build": "next build",
     "start": "next start",
     "postinstall": "fumadocs-mdx",
@@ -111,6 +112,7 @@
     "next-intl": "^4.0.0",
     "next-safe-action": "^7.10.4",
     "next-themes": "^0.4.4",
+    "pg": "^8.16.0",
     "nuqs": "^2.5.1",
     "postgres": "^3.4.5",
     "radix-ui": "^1.4.2",
@@ -143,6 +145,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
+    "@opennextjs/cloudflare": "^1.6.5",
     "@tailwindcss/postcss": "^4.0.14",
     "@tanstack/eslint-plugin-query": "^5.83.1",
     "@types/mdx": "^2.0.13",
@@ -157,6 +160,7 @@
     "react-email": "3.0.7",
     "tailwindcss": "^4.0.14",
     "tsx": "^4.19.3",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "wrangler": "^4.28.1"
   }
 }

public/_headers

@@ -0,0 +1,2 @@
+/_next/static/*
+  Cache-Control: public,max-age=31536000,immutable

src/db/index.ts

@@ -2,17 +2,23 @@
  * Connect to PostgreSQL Database (Supabase/Neon/Local PostgreSQL)
  * https://orm.drizzle.team/docs/tutorials/drizzle-with-supabase
  */
-import { drizzle } from 'drizzle-orm/postgres-js';
-import postgres from 'postgres';
+import { getCloudflareContext } from '@opennextjs/cloudflare';
+import { drizzle } from 'drizzle-orm/node-postgres';
+import { Pool } from 'pg';
 import * as schema from './schema';
 
 let db: ReturnType<typeof drizzle> | null = null;
 
+// https://opennext.js.org/cloudflare/howtos/db#postgresql
 export async function getDb() {
   if (db) return db;
-  const connectionString = process.env.DATABASE_URL!;
-  const client = postgres(connectionString, { prepare: false });
-  db = drizzle(client, { schema });
+  const { env } = await getCloudflareContext({ async: true });
+  const pool = new Pool({
+    connectionString: env.HYPERDRIVE.connectionString,
+    // You don't want to reuse the same connection for multiple requests
+    maxUses: 1,
+  });
+  db = drizzle({ client: pool, schema });
   return db;
 }
 

src/payment/provider/stripe.ts

@@ -57,7 +57,13 @@ export class StripeProvider implements PaymentProvider {
     }
 
     // Initialize Stripe without specifying apiVersion to use default/latest version
-    this.stripe = new Stripe(apiKey);
+    // https://opennext.js.org/cloudflare/howtos/stripeAPI
+    // When creating a Stripe object, the default http client implementation is based on
+    // node:https which is not implemented on Workers.
+    this.stripe = new Stripe(apiKey, {
+      // Cloudflare Workers use the Fetch API for their API requests.
+      httpClient: Stripe.createFetchHttpClient(),
+    });
     this.webhookSecret = webhookSecret;
   }
 

wrangler.jsonc

@@ -0,0 +1,84 @@
+/**
+ * For more details on how to configure Wrangler, refer to:
+ * https://developers.cloudflare.com/workers/wrangler/configuration/
+ */
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "main": ".open-next/worker.js",
+  "name": "mksaas-template",
+  "compatibility_date": "2024-12-30",
+  "compatibility_flags": [
+    // Enable Node.js API
+    // see https://developers.cloudflare.com/workers/configuration/compatibility-flags/#nodejs-compatibility-flag
+    "nodejs_compat",
+    // This also enables nodejs_compat_v2 as long as compatibility date is 2024-09-23 or later.
+    // https://developers.cloudflare.com/workers/configuration/compatibility-dates/#nodejs-compatibility-flag
+    // Enable improved Node.js API with polyfills and native code
+    // see https://blog.cloudflare.com/zh-cn/more-npm-packages-on-cloudflare-workers-combining-polyfills-and-native-code/
+    // "nodejs_compat_v2",
+    // Enable auto-populating process.env
+    // see https://developers.cloudflare.com/workers/configuration/compatibility-flags/#enable-auto-populating-processenv
+    "nodejs_compat_populate_process_env",
+    // Allow to fetch URLs in your app
+    // see https://developers.cloudflare.com/workers/configuration/compatibility-flags/#global-fetch-strictly-public
+    "global_fetch_strictly_public"
+  ],
+  // Minification helps to keep the Worker bundle size down and improve start up time.
+  "minify": true,
+
+  // Enables Workers Trace Events Logpush for a Worker
+  "logpush": true,
+
+  // https://developers.cloudflare.com/workers/wrangler/configuration/#top-level-only-keys
+  // Whether Wrangler should keep variables configured in the dashboard on deploy
+  "keep_vars": true,
+
+  "assets": {
+    "binding": "ASSETS",
+    "directory": ".open-next/assets"
+  },
+
+  // https://developers.cloudflare.com/workers/wrangler/configuration/#observability
+  "observability": {
+    "enabled": true
+  },
+
+  /**
+   * Smart Placement
+   * Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
+   */
+  // "placement": { "mode": "smart" },
+
+  /**
+   * Bindings
+   * Bindings allow your Worker to interact with resources on the Cloudflare Developer Platform, including
+   * databases, object storage, AI inference, real-time communication and more.
+   * https://developers.cloudflare.com/workers/runtime-apis/bindings/
+   */
+
+  /**
+   * Hyperdrive
+   * https://opennext.js.org/cloudflare/howtos/db#hyperdrive-example
+   * https://developers.cloudflare.com/workers/tutorials/postgres/#8-use-hyperdrive-to-accelerate-queries
+   */
+  "hyperdrive": [
+    {
+      "binding": "HYPERDRIVE",
+      "id": "8ba4508b28cf42f987f3533c1f09433c",
+      "localConnectionString": "postgresql://postgres:postgres@localhost:5432/postgres"
+    }
+  ],
+
+  /**
+   * Environment Variables
+   * https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
+   */
+  "vars": {},
+
+  /**
+   * Note: Use secrets to store sensitive data.
+   * https://developers.cloudflare.com/workers/configuration/secrets/
+   */
+
+  "kv_namespaces": []
+}