ExpoとNext.jsで Web/Native両対応アプリ開発
2K Views
April 16, 25
スライド概要
React Native Meetup #21 ft. menu.inc
iOS/Android/Next.js/React Nativeなどで開発をやっています！
関連スライド
Meta XR SDK(V66-74)でQuestアプリを開発
あうぜん
887.5K
各ページのテキスト
縦型ショートドラマ 「テラードラマ」 iOS/Android/Webで展開 Expo + Next.jsを利用して開発
なぜExpo + Next.jsを選択したか
なぜExpo + Next.jsを選択したか iOS/Android/Webの全プラットフォームを少人数で開発する必要があった 開発の効率化を行いたい SEOを意識してSSRを行う必要があった Expo 52ではSSR(RSC)がExperimentallyで利用はできるが、安定性を考慮 してNext.jsを選択 その他クロスプラットフォームのフレームワークとしてFlutterやCompose MultiPlatformなどもあるが、Webのサポートが限定的だった 👉 そのため、今回はExpo + Next.jsを選択した
技術スタック
技術スタック Expo SDK 52 Next.js Tamagui Expo Router Storybook Firebase
スタイリングライブラリ/UIコンポーネントの選定 WebとNativeの両方に対応していること レスポンシブ機能と、開発工数の削減のためUIコンポーネントも提供されて いるものを使いたかった NativeWindやUnistylesなども候補にはあったが、別プロジェクトで NativeBaseやChakra UIが使われていることもあり、書き心地が近いTamagui を選択 Tailwindに慣れていればNativeWindを選んでいたかも
ExpoとNext.jsとの共存
ディレクトリ構成 プロジェクトをmonorepoにして、次のようなディレクトリ構成としている 📦 ├─ apps │ ├─ expo │ └─ next ├─ packages │ ├─ app │ ├─ api-clients │ ├─ eslint-config │ │ ├─ components └─ utilities └─ modules
Solito React NavigationとNext.jsのLinkをラップしたライブラリ 今回は内部的にReact Navigationを使うExpo Routerを使用 Solitoを使うことでExpo/Next.jsのそれぞれの実行環境を意識せずにページ間 遷移が可能になった
UI実装について
プラットフォームごとのUIの調整
Tamaguiでは $platform- やメディア
クエリのプロパティでそれぞれの環境
の指定が可能
<XStack
w="100%"
justifyContent="center"
$platform-web={{
overflow: 'hidden',
}}
$platform-native={{
overflow: 'scroll',
}}
$sm={{
background: 'red',
}}
$gtMd={{
background: 'blue',
}}
{...props}
/>
Storybook Storybook (for React Native Web)でUI の確認を行うことで、コンポーネント の開発を効率的に行えている
ネイティブアプリの実装について
Expo Modules APIの活用 動画プレイヤー周りの実装や、いくつかのサードパーティSDK、NativeのAPIを 呼び出す必要があるものをExpo Modulesで作成した Expo Modules APIを使うことで、型安全にReact NativeとNative(Web)の層の呼 び出しを行うことができる 実装の雛形も npx create-expo-module で作成でき、プラットフォームごとの 実装をSwift(iOS)/Kotlin(Android)/TypeScript(Web)で実装することができる
Continuous Native Generation (CNG)への対応 今後のExpoのバージョンアップやプロジェクトの管理を行いやすくするため、 CNGに対応して ios/ と android/ ディレクトリはgitignoreした ネイティブのプロジェクト配下で変更が必要な場合、Config pluginsを作成して いった
Expo + Next.jsで開発を行った感想
良かった点 TypeScriptとReact (Native)だけでiOS/Android/Webが対応できた StorybookやReact NativeのHotReloadなどもあり、UIの実装やテストなどが 効率的にできた Tamagui + Next.jsの組み合わせも、特に大きな問題がなく普通に使えている Expo Routerを使うことによって、File-based routingが利用でき、Next.jsと 同じようにアプリの開発ができた Expo RouterでDeepLinkも自動で対応されて神 体感全体の7割ほどがWebとNativeでコードが共通化できており、ロジックな どWebとNativeで乖離がない状態にできている
まとめ
まとめ ExpoとNext.jsを組み合わせることで、SSRを行うWebアプリケーションと iOS/Androidアプリケーションを作成できた Web/Nativeともに品質的にも問題なく、技術的に解決できないようなこともな かった Web用にNext.jsを使うことで、SSRのほか、SSGやRSCなどNext.jsのその他多く の機能も利用できるので、しばらくはNext.jsを併用する構成が良さそう 一緒にテラーノベル/テラードラマを開発してくれる方も募集中です！🤝