[migrate] replace Vercel with CloudFlare to deploy

.github/workflows/main.yml

@@ -5,25 +5,72 @@ on:
       - "**"
 jobs:
   Build-and-Deploy:
-    env:
-      VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
-      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
     runs-on: ubuntu-latest
     permissions:
       contents: write
+      pull-requests: write
     steps:
       - uses: actions/checkout@v7
-        if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
 
-      - name: Deploy to Vercel
-        id: vercel-deployment
-        uses: amondnet/vercel-action@v42.3.0
-        if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
+      - uses: pnpm/action-setup@v6
         with:
-          vercel-token: ${{ secrets.VERCEL_TOKEN }}
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
-          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
-          working-directory: ./
-          vercel-args: ${{ github.ref == 'refs/heads/main' && ' --prod' || '' }}
+            version: 10
+
+      - uses: actions/setup-node@v7
+        with:
+            node-version: 24
+            registry-url: https://registry.npmjs.org
+            cache: pnpm
+
+      - name: Install Dependencies
+        run: pnpm i --frozen-lockfile
+
+      - name: Deploy to CloudFlare
+        env:
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          DEFAULT_BRANCH: ${{ github.event.repository.default_branch }}
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          if [[ "$GITHUB_REF_NAME" == "$DEFAULT_BRANCH" ]]; then
+            echo "Deploying to production environment"
+            pnpm run deploy
+          else
+            BRANCH_SLUG=$(echo "$GITHUB_REF_NAME" | tr '[:upper:]' '[:lower:]' | sed -E 's/[^a-z0-9-]+/-/g; s/-+/-/g; s/^-+//; s/-+$//')
+            BRANCH_SLUG="${BRANCH_SLUG:0:40}"
+            PREVIEW_ALIAS="b-${BRANCH_SLUG}"
+            PREVIEW_SUMMARY_FILE="cloudflare-preview-summary.md"
+
+            echo "Building OpenNext bundle for preview URLs"
+            pnpm registry:build
+            npx opennextjs-cloudflare build
+
+            echo "Uploading Worker version with preview alias: $PREVIEW_ALIAS"
+            npx wrangler versions upload \
+              --config wrangler.jsonc \
+              --preview-alias "$PREVIEW_ALIAS" \
+              --message "Preview for $GITHUB_REF_NAME @ $GITHUB_SHA" | \
+              tee wrangler-preview-output.log
+            {
+              echo "## Cloudflare Preview Deployment"
+              echo ""
+              echo "- Branch: $GITHUB_REF_NAME"
+              echo "- Commit: $GITHUB_SHA"
+              echo "- Preview Alias: $PREVIEW_ALIAS"
+              echo ""
+              echo "### Wrangler Output"
+              echo ''
+              grep -E 'workers.dev|preview|Version|Uploaded|Deployed' wrangler-preview-output.log || cat wrangler-preview-output.log
+              echo ''
+            } > "$PREVIEW_SUMMARY_FILE"
+
+            cat "$PREVIEW_SUMMARY_FILE" >> "$GITHUB_STEP_SUMMARY"
+
+            PR_NUMBER=$(gh pr list --head "$GITHUB_REF_NAME" --state open --json number --jq '.[0].number')
+            if [[ -n "$PR_NUMBER" ]]; then
+              echo "Posting preview summary to PR #$PR_NUMBER"
+              gh pr comment "$PR_NUMBER" --body-file "$PREVIEW_SUMMARY_FILE"
+            else
+              echo "No open PR found for branch $GITHUB_REF_NAME, skip PR comment"
+            fi
+          fi

.gitignore

@@ -13,9 +13,10 @@
 # testing
 /coverage
 
-# next.js
+# Next.js
 /.next/
 /out/
+/.open-next/
 
 # production
 /build
@@ -33,10 +34,14 @@ yarn-error.log*
 # env files (can opt-in for committing if needed)
 .env*.local
 
-# vercel
+# Vercel
 .vercel
 
-# typescript
+# CloudFlare
+cloudflare-env.d.ts
+.wrangler
+
+# TypeScript
 *.tsbuildinfo
 next-env.d.ts
 

README.md

@@ -106,6 +106,28 @@ module.exports = {
 
 Build command should be `npm run install && npm run build`.
 
+###### CloudFlare
+
+Follow CloudFlare's official manual setup guide for Next.js:
+
+https://developers.cloudflare.com/workers/framework-guides/web-apps/nextjs/#manual-configuration
+
+This project is already configured with:
+
+1. `@opennextjs/cloudflare` dependency
+2. `wrangler` dev dependency
+3. `wrangler.jsonc`
+4. `open-next.config.ts`
+5. scripts in `package.json`
+
+Use the following commands:
+
+```bash
+pnpm dev
+pnpm preview
+pnpm run deploy
+```
+
 #### Vite
 
 Ask AI or https://x.com/evanyou, if you're sure that he won't say bad words to niche users.

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.5.2/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.5.7/schema.json",
   "linter": {
     "enabled": true,
     "rules": {

open-next.config.ts

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

package.json

@@ -9,20 +9,24 @@
     "registry:build": "shadcn build",
     "dev": "next dev --webpack",
     "build": "npm run registry:build  &&  next build --webpack",
-    "start": "next start"
+    "start": "next start",
+    "preview": "opennextjs-cloudflare build  &&  opennextjs-cloudflare preview",
+    "deploy": "opennextjs-cloudflare build  &&  opennextjs-cloudflare deploy",
+    "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
   },
   "dependencies": {
+    "@opennextjs/cloudflare": "^1.20.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "edkit": "^1.3.1",
     "lodash.debounce": "^4.0.8",
-    "lucide-react": "^1.27.0",
-    "mobx": ">=6",
+    "lucide-react": "^1.28.0",
+    "mobx": "^6.16.1",
     "mobx-i18n": "^0.7.5",
-    "mobx-react": ">=9",
-    "mobx-react-helper": "^0.5.1",
+    "mobx-react": "^9.2.2",
+    "mobx-react-helper": "^0.5.2",
     "mobx-restful": "^2.1.4",
-    "next": "^16.2.12",
+    "next": "16.3.0",
     "radix-ui": "^1.6.7",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
@@ -31,20 +35,21 @@
     "web-utility": "^4.7.2"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.5.6",
-    "@octokit/openapi-types": "^27.0.0",
+    "@biomejs/biome": "^2.5.7",
+    "@octokit/openapi-types": "^28.0.0",
     "@tailwindcss/postcss": "^4.3.3",
     "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^24.13.3",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "husky": "^9.1.7",
-    "lint-staged": "^17.2.0",
+    "lint-staged": "^17.3.0",
     "mobx-github": "^0.7.0",
-    "shadcn": "^4.16.0",
+    "shadcn": "^4.16.1",
     "shadcn-helper": "^0.5.9",
     "tailwindcss": "^4.3.3",
-    "typescript": "~5.9.3"
+    "typescript": "~6.0.3",
+    "wrangler": "^4.118.0"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": [