Migrate to Cloudflare worker

SplittyDev · SplittyDev · commit 548a68f20649 · 2026-02-26T00:23:23.000+07:00
diff --git a/badgers-web/.gitignore b/badgers-web/.gitignore
@@ -12,6 +12,9 @@
 /.next/
 /out/
 
+# wrangler
+.wrangler
+
 # production
 /build
 
@@ -26,10 +29,14 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.dev.vars
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# OpenNext
+.open-next
diff --git a/badgers-web/cloudflare-env.d.ts b/badgers-web/cloudflare-env.d.ts
diff --git a/badgers-web/next.config.js b/badgers-web/next.config.js
@@ -2,3 +2,5 @@
 const nextConfig = {}
 
 module.exports = nextConfig
+
+import('@opennextjs/cloudflare').then(m => m.initOpenNextCloudflareForDev());
diff --git a/badgers-web/open-next.config.ts b/badgers-web/open-next.config.ts
@@ -0,0 +1,7 @@
+// default open-next.config.ts file created by @opennextjs/cloudflare
+import { defineCloudflareConfig } from "@opennextjs/cloudflare";
+import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache";
+
+export default defineCloudflareConfig({
+	incrementalCache: r2IncrementalCache,
+});
diff --git a/badgers-web/package.json b/badgers-web/package.json
@@ -3,13 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
     "build": "next build",
+    "dev": "next dev --turbopack",
     "start": "next start",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
+    "deploy": "opennextjs-cloudflare build --env=prod && opennextjs-cloudflare deploy --env=prod",
+    "upload": "opennextjs-cloudflare build --env=prod && opennextjs-cloudflare upload --env=prod",
+    "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
   },
   "dependencies": {
     "@octokit/rest": "^20.1.1",
+    "@opennextjs/cloudflare": "^1.17.1",
     "@types/node": "20.13.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
@@ -28,7 +33,8 @@
   "devDependencies": {
     "@octokit/types": "^13.5.0",
     "encoding": "^0.1.13",
-    "sharp": "^0.33.4"
+    "sharp": "^0.33.4",
+    "wrangler": "^4.68.1"
   },
   "packageManager": "yarn@4.12.0",
   "resolutions": {
diff --git a/badgers-web/public/_headers b/badgers-web/public/_headers
@@ -0,0 +1,4 @@
+# https://developers.cloudflare.com/workers/static-assets/headers
+# https://opennext.js.org/cloudflare/caching#static-assets-caching
+/_next/static/*
+  Cache-Control: public,max-age=31536000,immutable
diff --git a/badgers-web/src/app/codeberg/closed-issues/[owner]/[repo]/route.ts b/badgers-web/src/app/codeberg/closed-issues/[owner]/[repo]/route.ts
@@ -29,5 +29,3 @@ export async function GET(request: NextRequest, props: Params) {
         closedIssuesCount?.toString() ?? 'None',
     )
 }
-
-export const runtime = 'edge'
diff --git a/badgers-web/src/app/codeberg/issues/[owner]/[repo]/route.ts b/badgers-web/src/app/codeberg/issues/[owner]/[repo]/route.ts
@@ -29,5 +29,3 @@ export async function GET(request: NextRequest, props: Params) {
         issuesCount?.toString() ?? 'None',
     )
 }
-
-export const runtime = 'edge'
diff --git a/badgers-web/src/app/codeberg/open-issues/[owner]/[repo]/route.ts b/badgers-web/src/app/codeberg/open-issues/[owner]/[repo]/route.ts
@@ -29,5 +29,3 @@ export async function GET(request: NextRequest, props: Params) {
         openIssuesCount?.toString() ?? 'None',
     )
 }
-
-export const runtime = 'edge'
diff --git a/badgers-web/src/app/codeberg/release/[owner]/[repo]/route.ts b/badgers-web/src/app/codeberg/release/[owner]/[repo]/route.ts
@@ -34,4 +34,3 @@ export async function GET(request: NextRequest, props: Params) {
     })
 }
 
-export const runtime = 'edge'
diff --git a/badgers-web/src/app/codeberg/stars/[owner]/[repo]/route.ts b/badgers-web/src/app/codeberg/stars/[owner]/[repo]/route.ts
@@ -31,4 +31,3 @@ export async function GET(request: NextRequest, props: Params) {
     )
 }
 
-export const runtime = 'edge'
diff --git a/badgers-web/src/app/npm/license/[org_or_pkg]/[pkg]/route.ts b/badgers-web/src/app/npm/license/[org_or_pkg]/[pkg]/route.ts
@@ -23,4 +23,3 @@ export async function GET(request: NextRequest, props: Params) {
     return await Badge.generate(request, 'license', data.license)
 }
 
-export const runtime = 'edge'
diff --git a/badgers-web/src/app/npm/license/[org_or_pkg]/route.ts b/badgers-web/src/app/npm/license/[org_or_pkg]/route.ts
@@ -21,4 +21,3 @@ export async function GET(request: NextRequest, props: Params) {
     return await Badge.generate(request, 'license', data.license)
 }
 
-export const runtime = 'edge'
diff --git a/badgers-web/src/app/npm/name/[org_or_pkg]/[pkg]/route.ts b/badgers-web/src/app/npm/name/[org_or_pkg]/[pkg]/route.ts
@@ -23,4 +23,3 @@ export async function GET(request: NextRequest, props: Params) {
     return await Badge.generate(request, 'npm', data.name)
 }
 
-export const runtime = 'edge'
diff --git a/badgers-web/src/app/npm/name/[org_or_pkg]/route.ts b/badgers-web/src/app/npm/name/[org_or_pkg]/route.ts
@@ -21,4 +21,3 @@ export async function GET(request: NextRequest, props: Params) {
     return await Badge.generate(request, 'npm', data.name)
 }
 
-export const runtime = 'edge'
diff --git a/badgers-web/src/app/npm/types/[org_or_pkg]/[pkg]/route.ts b/badgers-web/src/app/npm/types/[org_or_pkg]/[pkg]/route.ts
@@ -37,4 +37,3 @@ export async function GET(request: NextRequest, props: Params) {
     })
 }
 
-export const runtime = 'edge'
diff --git a/badgers-web/src/app/npm/types/[org_or_pkg]/route.ts b/badgers-web/src/app/npm/types/[org_or_pkg]/route.ts
@@ -35,4 +35,3 @@ export async function GET(request: NextRequest, props: Params) {
     })
 }
 
-export const runtime = 'edge'
diff --git a/badgers-web/src/app/pypi/info/[pkg]/route.ts b/badgers-web/src/app/pypi/info/[pkg]/route.ts
@@ -25,4 +25,3 @@ export async function GET(request: NextRequest, props: Params) {
     )
 }
 
-export const runtime = 'edge'
diff --git a/badgers-web/src/app/pypi/license/[pkg]/route.ts b/badgers-web/src/app/pypi/license/[pkg]/route.ts
@@ -23,4 +23,3 @@ export async function GET(request: NextRequest, props: Params) {
     return await Badge.generate(request, 'license', `${license}`, { color })
 }
 
-export const runtime = 'edge'
diff --git a/badgers-web/src/app/pypi/name/[pkg]/route.ts b/badgers-web/src/app/pypi/name/[pkg]/route.ts
@@ -21,4 +21,3 @@ export async function GET(request: NextRequest, props: Params) {
     return await Badge.generate(request, 'pypi', `${data.name}`)
 }
 
-export const runtime = 'edge'
diff --git a/badgers-web/src/app/pypi/version/[pkg]/route.ts b/badgers-web/src/app/pypi/version/[pkg]/route.ts
@@ -21,4 +21,3 @@ export async function GET(request: NextRequest, props: Params) {
     return await Badge.generate(request, 'pypi', `v${data.version}`)
 }
 
-export const runtime = 'edge'
diff --git a/badgers-web/src/components/BadgeEndpoint.tsx b/badgers-web/src/components/BadgeEndpoint.tsx
@@ -1,10 +1,10 @@
-import { useState } from 'react'
 import Path from './Path'
 
 type Props = {
     name: string
     path: string
     inject: string[]
+    date?: number
 }
 
 // function useOnScreen(ref: RefObject<HTMLElement>) {
@@ -24,8 +24,7 @@ type Props = {
 
 const isDevelopment = process.env.NODE_ENV === 'development'
 
-export default function BadgeEndpoint({ name, path, inject }: Props) {
-    const [date] = useState(() => Date.now())
+export default function BadgeEndpoint({ name, path, inject, date = Date.now() }: Props) {
     const buildUrl = () => {
         const proto = process.env.NEXT_PUBLIC_WEB_PROTO
         const host = process.env.NEXT_PUBLIC_WEB_HOST
diff --git a/badgers-web/src/components/StaticBadge.tsx b/badgers-web/src/components/StaticBadge.tsx
@@ -1,11 +1,11 @@
-import { useState } from "react"
 
 type Props = {
     label: string
     status: string
     color?: string
     icon?: string
     labelOverride?: string
+    date?: number
 }
 
 const isDevelopment = process.env.NODE_ENV === 'development'
@@ -30,8 +30,8 @@ export default function StaticBadge({
     color,
     icon,
     labelOverride,
+    date = Date.now()
 }: Props) {
-    const [date] = useState(() => Date.now())
     const buildUrl = () => {
         const proto = process.env.NEXT_PUBLIC_API_PROTO
         const host = process.env.NEXT_PUBLIC_API_HOST
diff --git a/badgers-web/src/components/ThemeStrip.tsx b/badgers-web/src/components/ThemeStrip.tsx
@@ -1,14 +1,12 @@
-import { useState } from "react"
 
 type Props = {
     themes: string[]
+    date?: number
 }
 
 const isDevelopment = process.env.NODE_ENV === 'development'
 
-export default function ThemeStrip({ themes }: Props) {
-    const [date] = useState(() => Date.now())
-
+export default function ThemeStrip({ themes, date = Date.now() }: Props) {
     return (
         <div className="flex flex-col gap-2">
             {themes.map(theme => {
diff --git a/badgers-web/tsconfig.json b/badgers-web/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "esnext",
     "lib": [
       "dom",
       "dom.iterable",
@@ -13,7 +13,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
diff --git a/badgers-web/wrangler.jsonc b/badgers-web/wrangler.jsonc
@@ -0,0 +1,42 @@
+{
+    "$schema": "node_modules/wrangler/config-schema.json",
+    "account_id": "d9006e724848ae413c69d6f52a934063",
+    "main": ".open-next/worker.js",
+    "name": "badgers-web",
+    "compatibility_date": "2026-02-25",
+    "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
+    "assets": {
+        "directory": ".open-next/assets",
+        "binding": "ASSETS",
+    },
+    "vars": {
+        "NEXT_PUBLIC_WEB_PROTO": "https",
+        "NEXT_PUBLIC_WEB_HOST": "badgers.space",
+        "NEXT_PUBLIC_API_PROTO": "https",
+        "NEXT_PUBLIC_API_HOST": "honey.badgers.space",
+    },
+    "services": [
+        {
+            // Self-reference service binding, the service name must match the worker name
+            // see https://opennext.js.org/cloudflare/caching
+            "binding": "WORKER_SELF_REFERENCE",
+            "service": "badgers-web",
+        },
+    ],
+    "r2_buckets": [
+        // Use R2 incremental cache
+        // See https://opennext.js.org/cloudflare/caching
+        {
+            "binding": "NEXT_INC_CACHE_R2_BUCKET",
+            // Create the bucket before deploying
+            // You can change the bucket name if you want
+            // See https://developers.cloudflare.com/workers/wrangler/commands/#r2-bucket-create
+            "bucket_name": "badgers-web-opennext-cache",
+        },
+    ],
+    "images": {
+        // Enable image optimization
+        // see https://opennext.js.org/cloudflare/howtos/image
+        "binding": "IMAGES",
+    }
+}
diff --git a/badgers-web/yarn.lock b/badgers-web/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -29,5 +29,3 @@ export async function GET(request: NextRequest, props: Params) {`
`29`	`29`	`closedIssuesCount?.toString() ?? 'None',`
`30`	`30`	`)`
`31`	`31`	`}`
`32`		`-`
`33`		`-export const runtime = 'edge'`
Original file line number	Diff line number	Diff line change
`@@ -34,4 +34,3 @@ export async function GET(request: NextRequest, props: Params) {`
`34`	`34`	`})`
`35`	`35`	`}`
`36`	`36`
`37`		`-export const runtime = 'edge'`