Disable the deprecated react native web lite

- Don't assume that the setImmediate global is available.
- Add getServerSideProps ssr example.

apps/next/next.config.js

@@ -40,7 +40,6 @@ const plugins = [
     outputCSS: process.env.NODE_ENV === 'production' ? './public/tamagui.css' : null,
     logTimings: true,
     disableExtraction,
-    useReactNativeWebLite: true,
     shouldExtract: (path) => {
       if (path.includes(join('packages', 'app'))) {
         return true

apps/next/package.json

@@ -4,12 +4,15 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "local-build": "TAMAGUI_TARGET=web bun x @cloudflare/next-on-pages --disable-worker-minification",
+    "local-serve": "bun x wrangler pages dev .vercel/output/static --port 3000 --compatibility-date 2023-10-30 --compatibility-flag=nodejs_compat",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "clean": "git clean -xdf .next node_modules .tamagui"
   },
   "dependencies": {
+    "@cloudflare/next-on-pages": "1.8.3",
     "@ducanh2912/next-pwa": "^9.7.2",
     "@supabase/auth-helpers-nextjs": "^0.7.4",
     "@supabase/auth-helpers-react": "^0.4.2",
@@ -31,6 +34,10 @@
   "devDependencies": {
     "@tamagui/next-plugin": "1.75.9",
     "@types/react": "^18.2.37",
-    "vercel": "32.5.3"
+    "eslint-plugin-next-on-pages": "1.8.3",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.0.4",
+    "vercel": "33.0.2",
+    "wrangler": "3.22.3"
   }
 }

apps/next/pages/_app.tsx

@@ -1,5 +1,13 @@
 if (typeof requestAnimationFrame === 'undefined') {
-  globalThis.requestAnimationFrame = setImmediate
+  if (typeof setImmediate !== 'undefined') {
+    globalThis.requestAnimationFrame = setImmediate
+  } else {
+    globalThis.requestAnimationFrame = (callback) => {
+      const now = Date.now()
+      callback(now)
+      return now
+    }
+  }
 }
 import '@tamagui/core/reset.css'
 import '@tamagui/font-inter/css/400.css'

apps/next/pages/ssr/index.tsx

@@ -0,0 +1,17 @@
+import { Paragraph, YStack } from '@t4/ui'
+import { GetServerSideProps } from 'next'
+
+export const runtime = 'experimental-edge'
+
+export const getServerSideProps = (async () => {
+  return { props: { content: 'This content is sent from the server' } }
+}) satisfies GetServerSideProps<{ content: string }>
+
+export default function Page(props: { content: string }) {
+  return (
+    <YStack flex={1}>
+      <Paragraph role='heading'>Server-side rendering</Paragraph>
+      <Paragraph>{props.content}</Paragraph>
+    </YStack>
+  )
+}

apps/next/wrangler.toml

@@ -1,8 +1,10 @@
-[env.preview]
-name = "t4-stack-preview"
-workers_dev = true
-
-[env.production]
 name = "t4-stack"
+compatibility_date = "2023-10-30"
+send_metrics = false
+node_compat = true
 route = "app.t4stack.com/*"
 workers_dev = false
+
+[env.preview]
+name = "t4-stack-preview"
+workers_dev = true

package.json

@@ -45,6 +45,6 @@
     "npm-run-all": "^4.1.5",
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "^5.2.2",
-    "workerd": "1.20231030.0"
+    "workerd": "1.20231218.0"
   }
 }

packages/api/package.json

@@ -30,6 +30,6 @@
     "@cloudflare/workers-types": "^4.20231025.0",
     "drizzle-kit": "^0.20.1",
     "typescript": "^5.2.2",
-    "wrangler": "^3.15.0"
+    "wrangler": "3.22.3"
   }
 }

packages/api/src/worker.ts

@@ -20,8 +20,10 @@ app.use('/trpc/*', async (c, next) => {
     )
   }
   return await cors({
-    origin: [c.env.APP_URL],
-    allowMethods: ['POST', 'GET'],
+    origin: (origin) => (origin.endsWith(new URL(c.env.APP_URL).host) ? origin : c.env.APP_URL),
+    credentials: true,
+    allowMethods: ['GET', 'POST', 'OPTIONS', 'PUT', 'DELETE'],
+    // https://hono.dev/middleware/builtin/cors#options
   })(c, next)
 })
 

packages/api/wrangler.toml

@@ -1,5 +1,5 @@
 name = "t4-api"
-compatibility_date = "2023-10-16"
+compatibility_date = "2023-10-30"
 send_metrics = false
 node_compat = true
 main = "src/worker.ts"