chore: move to vercel

.github/workflows/deploy.yml

@@ -1,11 +1,16 @@
-name: Build and Deploy to Cloudflare
+name: Build and Deploy to Vercel
 on:
   push:
     branches: [main]
+  pull_request:
+    branches: [main]
 
 jobs:
   deploy:
     runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+      contents: read
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
@@ -19,23 +24,58 @@ jobs:
         run: |
           cargo build --release
 
-      # 2. Build Next.js for Cloudflare
+      # 2. Build Next.js
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'yarn'
+
       - name: Install dependencies
         run: yarn install --immutable --immutable-cache --check-cache
+
       - name: Build Next.js
         run: yarn build
 
-      - name: Build for Cloudflare
-        run: yarn deploy
+      # 3. Deploy to Vercel
+      - name: Install Vercel CLI
+        run: yarn global add vercel@latest
+
+      - name: Pull Vercel Environment
+        env:
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+        run: |
+          vercel pull --yes \
+            --environment=${{ github.event_name == 'pull_request' && 'preview' || 'production' }} \
+            --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Build for Vercel
+        run: vercel build ${{ github.event_name != 'pull_request' && '--prod' || '' }} --token=${{ secrets.VERCEL_TOKEN }}
+
+
+      - name: Deploy to Vercel
+        id: deploy
+        env:
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+        run: |
+          if [ "${{ github.event_name }}" == "pull_request" ]; then
+            url=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})
+          else
+            url=$(vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }})
+          fi
+          echo "url=$url" >> $GITHUB_OUTPUT
 
-      # 3. Deploy Prebuilt Artifacts to Cloudflare Workers
-      - name: Deploy to Cloudflare Workers
-        uses: cloudflare/wrangler-action@v3
+      # 4. Comment preview URL on PR
+      - name: Comment Preview URL
+        if: github.event_name == 'pull_request'
+        uses: actions/github-script@v7
         with:
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: `✅ Preview deployed: ${{ steps.deploy.outputs.url }}`
+            })

components/docs/components/tabs.tsx

@@ -78,10 +78,14 @@ function _Tabs({
     onChange?.(index)
   }, []) // eslint-disable-line react-hooks/exhaustive-deps -- only on mount
 
-  const itemsWithFallback = items ??
-    (Array.isArray(children)
-      ? Array.from({ length: children.length }, (_, i) => `Tab ${i}`)
-      : [])
+  const itemsWithFallback = React.useMemo(() => {
+    return (
+      items ??
+      (Array.isArray(children)
+        ? Array.from({ length: children.length }, (_, i) => `Tab ${i}`)
+        : [])
+    )
+  }, [children, items])
 
   return (
     <HeadlessTab.Group
@@ -104,7 +108,7 @@ function _Tabs({
                       ? "border-black dark:border-white text-black font-normal dark:font-light dark:text-white"
                       : "border-transparent hover:text-black dark:hover:text-white",
                     disabled &&
-                    "pointer-events-none text-gray-400 dark:text-neutral-600"
+                      "pointer-events-none text-gray-400 dark:text-neutral-600"
                   )
                 }
               >

package.json

@@ -5,8 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "NODE_ENV=production next build",
-    "start": "next start",
-    "deploy": "opennextjs-cloudflare build"
+    "start": "next start"
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.3.0",
@@ -40,7 +39,6 @@
     "@contentlayer/source-files": "^0.3.4",
     "@mdx-js/mdx": "^3.0.1",
     "@mermaid-js/mermaid-cli": "^11.6.0",
-    "@opennextjs/cloudflare": "^1.18.0",
     "@shikijs/rehype": "^3.22.0",
     "@shikijs/transformers": "^3.22.0",
     "@tailwindcss/typography": "^0.5.14",
@@ -66,8 +64,7 @@
     "shiki": "^3.22.0",
     "tailwindcss": "^3.3.2",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "5.1.6",
-    "wrangler": "4.80.0"
+    "typescript": "5.1.6"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

vercel.json

@@ -0,0 +1,6 @@
+{
+  "framework": "nextjs",
+  "installCommand": "yarn install --immutable",
+  "buildCommand": "yarn build",
+  "outputDirectory": ".next"
+}