はじめに

中野区在住の中野です。

はやい話がExpoのforWebでも Next.js が使えるようになったらしいです。

名前めんどくさいので Nxpo って呼ぶことにしました。

今回はExpoとNext.jsとNxpoのディレクトリ構造をそれぞれメモしています。

NxpoとExpoとNextをディレクトリ構造を比較

  • 各プロジェクトの構築
  • 各プロジェクトの構造を比較

各プロジェクトの構築

  • expo
npx expo-cli init プロジェクト名(expo)
  • next
npx create-next-app --example with-typescript プロジェクト名(next)
  • nxpo
npx create-react-native-app -t with-nextjs プロジェクト名(nxpo)

各プロジェクトの構造を比較

  • expo(ts)
.
├── App.tsx
├── app.json
├── assets
│   ├── fonts
│   └── images
├── babel.config.js
├── components
│   ├── EditScreenInfo.tsx
│   ├── StyledText.tsx
│   ├── Themed.tsx
│   └── __tests__
├── constants
│   ├── Colors.ts
│   └── Layout.ts
├── hooks
│   ├── useCachedResources.ts
│   ├── useColorScheme.ts
│   └── useColorScheme.web.ts
├── navigation
│   ├── BottomTabNavigator.tsx
│   ├── LinkingConfiguration.ts
│   └── index.tsx
├── package.json
├── screens
│   ├── NotFoundScreen.tsx
│   ├── TabOneScreen.tsx
│   └── TabTwoScreen.tsx
├── tsconfig.json
├── types.tsx
└── yarn.lock
  • next(ts)
.
├── README.md
├── components
│   ├── Layout.tsx
│   ├── List.tsx
│   ├── ListDetail.tsx
│   └── ListItem.tsx
├── interfaces
│   └── index.ts
├── next-env.d.ts
├── package.json
├── pages
│   ├── about.tsx
│   ├── api
│   ├── index.tsx
│   └── users
├── tsconfig.json
├── utils
│   └── sample-data.ts
└── yarn.lock
  • nxpo(ts)
.
├── App.tsx
├── app.json
├── assets
│   ├── fonts
│   └── images
├── babel.config.js
├── components
│   ├── EditScreenInfo.tsx
│   ├── StyledText.tsx
│   ├── Themed.tsx
│   └── __tests__
├── constants
│   ├── Colors.ts
│   └── Layout.ts
├── hooks
│   ├── useCachedResources.ts
│   ├── useColorScheme.ts
│   └── useColorScheme.web.ts
├── navigation
│   ├── BottomTabNavigator.tsx
│   ├── LinkingConfiguration.ts
│   └── index.tsx
├── package.json
├── screens
│   ├── NotFoundScreen.tsx
│   ├── TabOneScreen.tsx
│   └── TabTwoScreen.tsx
├── tsconfig.json
├── types.tsx
└── yarn.lock.
├── App.tsx
├── README.md
├── babel.config.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│   ├── _document.tsx
│   └── index.tsx
└── yarn.lock

さいごに

アプリ作ったあとにリソースを活用してwebのほうも一緒にやっちゃう?

と言う事を考えており、Nxpoに関する記事( Using Next.js with Expo for Web )を見つけたので、

それぞれのプロジェクトのディレクトリのdiffをとってみました。

しばらくNext触ったりExpo触ったりNxpo触ったりして結局どうするのか決めていきたいです。

\ Share /

全人類同時接続数No.1!バトルロイヤルゲームを生き残れ!

中野区在住の中野です。大阪生まれ大阪育ちですが就職のタイミングで上京しました。食いっぱぐれないようにすることをモットーに生存戦略を常に考えている元ネトゲ廃人現フルリモートwebエンジニア。Twitterでメンターとして駆け出しエンジニアたちをサポートしています。最近の関心事はDDDとScrum。いずれ起業することを考えてプロダクトを作成中。このブログでは生存戦略を考える上で試行錯誤した内容を記録していきます。