Use pnpm 11, next 16 and opennext for deploying to CF workers

.eslintignore

@@ -38,6 +38,7 @@ node_modules/
 
 # Next.js build output
 .next
+**/next-env.d.ts
 
 # Preconstruct build output
 dist
@@ -60,4 +61,3 @@ l10n.js
 l10n.d.ts
 packages/keystatic/src/app/l10n/index.js
 packages/keystatic/src/app/l10n/index.d.ts
-

.github/workflows/deploy-cloudflare.yml

@@ -0,0 +1,122 @@
+name: Build and deploy Cloudflare Workers
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+    inputs:
+      app:
+        description: App to upload as a preview
+        required: true
+        default: docs
+        type: choice
+        options:
+          - docs
+          - design-system/docs
+          - dev-projects/next-app
+          - all
+
+permissions:
+  contents: read
+
+jobs:
+  configure:
+    name: Configure app matrix
+    runs-on: ubuntu-latest
+    outputs:
+      matrix: ${{ steps.matrix.outputs.matrix }}
+    steps:
+      - id: matrix
+        name: Select apps
+        env:
+          EVENT_NAME: ${{ github.event_name }}
+          SELECTED_APP: ${{ inputs.app }}
+        run: |
+          all_apps='{"include":[{"app":"docs","worker":"keystatic-docs"},{"app":"design-system/docs","worker":"keystar-docs"},{"app":"dev-projects/next-app","worker":"keystatic-next-app"}]}'
+
+          if [[ "$EVENT_NAME" != "workflow_dispatch" || "$SELECTED_APP" == "all" ]]; then
+            matrix="$all_apps"
+          else
+            case "$SELECTED_APP" in
+              docs)
+                worker='keystatic-docs'
+                ;;
+              design-system/docs)
+                worker='keystar-docs'
+                ;;
+              dev-projects/next-app)
+                worker='keystatic-next-app'
+                ;;
+              *)
+                echo "Unsupported app: $SELECTED_APP" >&2
+                exit 1
+                ;;
+            esac
+            matrix="{\"include\":[{\"app\":\"$SELECTED_APP\",\"worker\":\"$worker\"}]}"
+          fi
+
+          echo "matrix=$matrix" >> "$GITHUB_OUTPUT"
+
+  build:
+    name: Build ${{ matrix.app }}
+    if: github.event_name == 'pull_request'
+    needs: configure
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix: ${{ fromJSON(needs.configure.outputs.matrix) }}
+    concurrency:
+      group:
+        cloudflare-build-${{ matrix.worker }}-${{
+        github.event.pull_request.number }}
+      cancel-in-progress: true
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v6
+
+      - uses: ./.github/actions/setup-deps
+
+      - name: Build Worker
+        run: pnpm cloudflare:build
+        working-directory: ${{ matrix.app }}
+
+  deploy:
+    name:
+      ${{ github.event_name == 'workflow_dispatch' && 'Preview' || 'Deploy' }}
+      ${{ matrix.app }}
+    if: github.event_name != 'pull_request'
+    needs: configure
+    runs-on: ubuntu-latest
+    environment: Cloudflare
+    strategy:
+      fail-fast: false
+      matrix: ${{ fromJSON(needs.configure.outputs.matrix) }}
+    concurrency:
+      group:
+        cloudflare-${{ matrix.worker }}-${{ github.event_name ==
+        'workflow_dispatch' && 'preview' || 'production' }}
+      cancel-in-progress: ${{ github.event_name == 'workflow_dispatch' }}
+    env:
+      CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+      CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v6
+
+      - uses: ./.github/actions/setup-deps
+
+      - name: Build Worker
+        run: pnpm cloudflare:build
+        working-directory: ${{ matrix.app }}
+
+      - name: Deploy to production
+        if: github.event_name == 'push'
+        run: pnpm exec opennextjs-cloudflare deploy
+        working-directory: ${{ matrix.app }}
+
+      - name: Upload preview
+        if: github.event_name == 'workflow_dispatch'
+        run: pnpm exec opennextjs-cloudflare upload --preview-alias preview
+        working-directory: ${{ matrix.app }}

.gitignore

@@ -21,6 +21,7 @@ node_modules/
 
 # Optional npm cache directory
 .npm
+.pnpm-store
 
 # Optional eslint cache
 .eslintcache
@@ -37,6 +38,8 @@ node_modules/
 
 # Next.js build output
 .next
+.open-next
+.wrangler
 .vercel
 
 # Preconstruct build output

.prettierignore

@@ -38,6 +38,7 @@ node_modules/
 
 # Next.js build output
 .next
+**/next-env.d.ts
 
 # Preconstruct build output
 dist

design-system/docs/app/keystatic/layout.tsx

@@ -4,8 +4,6 @@ export const metadata = {
   title: 'Keystatic',
 };
 
-export const runtime = 'edge';
-
 export default function RootLayout() {
   return (
     <html>

design-system/docs/next-env.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import './.next/types/routes.d.ts';
+import './.next/types/root-params.d.ts';
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

design-system/docs/next.config.mjs

@@ -1,13 +1,14 @@
-import withPreconstruct from '@preconstruct/next';
+import { initOpenNextCloudflareForDev } from '@opennextjs/cloudflare';
+
+initOpenNextCloudflareForDev();
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
   serverExternalPackages: ['esbuild'],
   experimental: {
     externalDir: true,
   },
 };
 
-export default withPreconstruct(nextConfig);
+export default nextConfig;

design-system/docs/open-next.config.ts

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

design-system/docs/package.json

@@ -4,40 +4,40 @@
   "private": true,
   "license": "MIT",
   "scripts": {
-    "build": "pnpm run '/build:*/'",
-    "build:docs": "pnpm pre-site && next build",
+    "build": "pnpm pre-site && next build",
     "build:playroom": "pnpm pre-site && playroom build",
     "build:storybook": "storybook build -o ./public/storybook",
+    "cloudflare:build": "opennextjs-cloudflare build",
+    "cloudflare:preview": "pnpm cloudflare:build && opennextjs-cloudflare preview",
     "dev": "pnpm pre-site && next dev",
     "dev:playroom": "playroom start",
     "dev:storybook": "storybook dev -p 6006",
-    "lint": "next lint",
+    "lint": "eslint .",
     "pre-site": "tsx ./scripts/pre-site.ts",
     "start": "next start"
   },
   "dependencies": {
     "@babel/core": "^7.23.0",
     "@babel/runtime": "^7.18.3",
-    "@cloudflare/next-on-pages": "^1.11.0",
     "@internationalized/date": "^3.12.2",
     "@keystar/ui": "workspace:*",
     "@keystatic/core": "workspace:^",
     "@keystatic/next": "workspace:^",
     "@markdoc/markdoc": "^0.4.0",
     "clipboard-copy": "^4.0.1",
     "emery": "^1.4.1",
-    "esbuild": "^0.14.53",
-    "next": "~15.1.10",
+    "esbuild": "^0.25.4",
+    "next": "~16.3.0",
     "parse-numeric-range": "^1.3.0",
     "prism-react-renderer": "^1.3.3",
-    "react": "^19.0.0",
+    "react": "^19.2.8",
     "react-aria": "catalog:",
-    "react-dom": "^19.0.0",
+    "react-dom": "^19.2.8",
     "tsx": "^4.8.2",
     "vercel": "^33.6.3"
   },
   "devDependencies": {
-    "@preconstruct/next": "^4.0.0",
+    "@opennextjs/cloudflare": "^1.20.2",
     "@sindresorhus/slugify": "^1.1.2",
     "@storybook/addon-a11y": "^7.4.6",
     "@storybook/addon-actions": "^7.4.6",
@@ -52,12 +52,13 @@
     "@storybook/preview-api": "^7.4.6",
     "@storybook/react": "^7.4.6",
     "@types/node": "25.0.3",
-    "@types/react": "^19.0.8",
+    "@types/react": "^19.2.18",
     "babel-loader": "^8.2.5",
     "playroom": "^0.28.0",
     "storybook": "^7.0.22",
     "storybook-dark-mode": "^3.0.0",
     "typescript": "^5.5.3",
-    "webpack": "^5.73.0"
+    "webpack": "^5.73.0",
+    "wrangler": "^4.118.0"
   }
 }

design-system/docs/public/_headers

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

design-system/docs/wrangler.jsonc

@@ -0,0 +1,19 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "keystar-docs",
+  "main": ".open-next/worker.js",
+  "compatibility_date": "2026-08-06",
+  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
+  "workers_dev": true,
+  "preview_urls": true,
+  "assets": {
+    "directory": ".open-next/assets",
+    "binding": "ASSETS"
+  },
+  "services": [
+    {
+      "binding": "WORKER_SELF_REFERENCE",
+      "service": "keystar-docs"
+    }
+  ]
+}

design-system/pkg/src/editor/EditorToolbar.tsx

@@ -6,11 +6,10 @@ import { PressResponder } from 'react-aria/private/interactions/PressResponder';
 import { filterDOMProps } from 'react-aria/filterDOMProps';
 import { isMac } from 'react-aria/private/utils/platform';
 import { mergeProps } from 'react-aria/mergeProps';
-import { AriaLabelingProps, DOMAttributes } from '@react-types/shared';
+import { AriaLabelingProps, DOMAttributes, Key } from '@react-types/shared';
 import { assert, assertNever } from 'emery';
 import {
   Dispatch,
-  Key,
   KeyboardEvent,
   PropsWithChildren,
   ReactNode,

design-system/pkg/src/editor/stories/EditorListbox.stories.tsx

@@ -1,5 +1,6 @@
 import { action } from '@keystar/ui-storybook';
-import { Key, ReactElement, useEffect, useRef } from 'react';
+import { Key } from '@react-types/shared';
+import { ReactElement, useEffect, useRef } from 'react';
 
 import { Icon } from '@keystar/ui/icon';
 import { fileCodeIcon } from '@keystar/ui/icon/icons/fileCodeIcon';

design-system/pkg/src/editor/stories/EditorToolbar.stories.tsx

@@ -11,7 +11,8 @@ import { listOrderedIcon } from '@keystar/ui/icon/icons/listOrderedIcon';
 import { Flex } from '@keystar/ui/layout';
 import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip';
 import { Kbd, Text } from '@keystar/ui/typography';
-import { Key, useState } from 'react';
+import { Key } from '@react-types/shared';
+import { useState } from 'react';
 
 import {
   EditorToolbar,

dev-projects/astro-content/package.json

@@ -19,11 +19,11 @@
     "@keystatic/core": "workspace:^",
     "@tailwindcss/typography": "^0.5.15",
     "@tailwindcss/vite": "^4.3.2",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "astro": "^7.0.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "tailwindcss": "^4.3.2"
   }
 }

dev-projects/astro/package.json

@@ -15,8 +15,8 @@
     "@braintree/sanitize-url": "^6.0.2",
     "@keystatic/astro": "workspace:^",
     "@keystatic/core": "workspace:^",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "astro": "^7.0.4",
     "direction": "^2.0.1",
     "is-hotkey": "^0.2.0",
@@ -27,8 +27,8 @@
     "micromark-extension-gfm-autolink-literal": "^2.0.0",
     "micromark-extension-gfm-strikethrough": "^2.0.0",
     "prop-types": "^15.8.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "react-keyed-flatten-children": "^1.3.0",
     "remove-accents": "^0.4.4",
     "set-cookie-parser": "^2.5.1"

dev-projects/localization/package.json

@@ -13,13 +13,13 @@
     "@keystatic/next": "workspace:^",
     "@preconstruct/next": "^4.0.0",
     "@types/node": "25.0.3",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "eslint": "^8.18.0",
     "eslint-config-next": "^12.1.6",
     "next": "~15.1.10",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "typescript": "^5.5.3"
   }
 }

dev-projects/next-app/app/api/keystatic/[...params]/route.ts

@@ -1,11 +1,9 @@
 import localConfig from '../../../../keystatic.config';
 import { makeRouteHandler } from '@keystatic/next/route-handler';
 
-export const runtime = 'edge';
-
 export const { POST, GET } = makeRouteHandler({
-  clientId: process.env.KEYSTATIC_GITHUB_CLIENT_ID,
-  clientSecret: process.env.KEYSTATIC_GITHUB_CLIENT_SECRET,
-  secret: process.env.KEYSTATIC_SECRET,
+  clientId: process.env.KEYSTATIC_GITHUB_CLIENT_ID || 'placeholder',
+  clientSecret: process.env.KEYSTATIC_GITHUB_CLIENT_SECRET || 'placeholder',
+  secret: process.env.KEYSTATIC_SECRET || 'placeholder',
   config: localConfig,
 });

dev-projects/next-app/app/keystatic/layout.tsx

@@ -4,8 +4,6 @@ export const metadata = {
   title: 'Keystatic',
 };
 
-export const runtime = 'edge';
-
 export default function RootLayout() {
   return (
     <html>