Expo(React Native) + Next.jsでアプリとWebでコードをできるだけ共通化して開発してみる【Tamagui/Solito】

$ npm create tamagui@latest
Creating tamagui app...
✔ Project name: test
? Pick a template: › - Use arrow-keys. Return to submit.
❯  Free - Expo + Next in a production ready monorepo

$ cd ./test
$ yarn

// Next.js
$ yarn web
// Expo 
$ yarn native

..
├── apps                  # アプリケーション関連のコード
│   ├── expo              # Expoアプリケーション（モバイル版）
│   └── next              # Next.jsアプリケーション（Web版）
├── packages              # 共通のライブラリやコンポーネント
│   ├── app               # アプリケーション関連の共有ライブラリ
│   ├── config            # 設定ファイルや設定関連のコード
│   └── ui                # 共通のUIコンポーネントやスタイル

import { HomeScreen } from 'app/features/home/screen'
import { Stack } from 'expo-router'

export default function Screen() {
  return (
    <>
      <Stack.Screen
        options={{
          title: 'Home',
        }}
      />
      <HomeScreen />
    </>
  )
}

'use client'
import { HomeScreen } from 'app/features/home/screen'
export default HomeScreen

import { useLink } from 'solito/navigation'
export function HomeScreen({ pagesMode = false }: { pagesMode?: boolean }) {
  const linkTarget = pagesMode ? '/pages-example-user' : '/user'
  const linkProps = useLink({
    href: `${linkTarget}/nate`,
  })

  return (
    <YStack f={1} >
      <Button {...linkProps}>Link to user</Button>
    </YStack>
  )
}

app/
├── features/
├── provider/
└──  navigation/

main = ".open-next/worker.js"
name = "my-app"
 
compatibility_date = "2024-09-23"
compatibility_flags = ["nodejs_compat"]
 
# The binding name must be "ASSETS" when the cache is enabled
assets = { directory = ".open-next/assets", binding = "ASSETS" }

"build:worker": "opennextjs-cloudflare",
"dev:worker": "wrangler dev --port 8771",
"preview:worker": "npm run build:worker && npm run dev:worker",
"deploy:worker": "npm run build:worker && wrangler deploy"