Next.js

​

Installation

npm install alchemy next @opennextjs/cloudflare

​

Configuration

.open-next/
wrangler.jsonc

import alchemy from "alchemy";
import { D1Database, KVNamespace, Nextjs } from "alchemy/cloudflare";

const app = await alchemy("my-nextjs-app");

const [db, cache] = await Promise.all([
  D1Database("database", {
    name: `${app.name}-${app.stage}-db`,
  }),
  KVNamespace("cache", {
    title: `${app.name}-${app.stage}-cache`,
  }),
]);

const website = await Nextjs("website", {
  bindings: {
    DB: db,
    CACHE: cache,
    API_SECRET: alchemy.secret.env.API_SECRET,
  },
});

console.log({
  url: website.url,
});

await app.finalize();

npm exec tsx alchemy.run.ts

​

Configuration Options

​

Properties

• bindings: Cloudflare bindings (KV, R2, D1, etc.)
• build: Build command override
  • Default: opennextjs-cloudflare build
• dev: Dev command override
  • Default: next dev
• entrypoint: Worker entrypoint path
  • Default: .open-next/worker.js
• assets: Static assets directory
  • Default: .open-next/assets
• noBundle: Skip bundling (useful for debugging)
  • Default: false

​

Build Configuration

• Runs OpenNext Cloudflare build
• Bundles the worker with minification
• Sets nodejs_compat compatibility flag
• Configures environment variables

​

Custom Build Command

const website = await Nextjs("website", {
  build: {
    command: "npm run build:cloudflare",
    env: {
      NEXTJS_ENV: "production",
    },
  },
});

​

Development Server

const website = await Nextjs("website", {
  dev: {
    command: "next dev --port 3001",
    domain: "localhost:3001",
    env: {
      NEXTJS_ENV: "development",
    },
  },
});

npm run dev

​

Accessing Bindings

import { getRequestContext } from '@opennextjs/cloudflare';

export async function GET(request: Request) {
  const { env } = await getRequestContext();
  const db = env.DB;
  const result = await db.prepare("SELECT * FROM users").all();
  
  return Response.json(result);
}

​

Compatibility Flags

• nodejs_compat - Node.js compatibility
• global_fetch_strictly_public - Fetch API compatibility

const website = await Nextjs("website", {
  compatibilityFlags: ["streams_enable_constructors"],
});

​

Limitations

• Not all Next.js features are supported on Cloudflare Workers
• Consult the OpenNext Cloudflare documentation for current limitations
• Some Node.js APIs may not be available

​

Related Resources

• Website - Base resource for web applications
• Worker - Cloudflare Workers deployment
• D1 Database - SQL database