Expo + Next.js

React Nativeの開発環境であるExpoにてWebも開発可能ですが、こちらにNext.jsを使えるということで試してみました。

Next.jsはReactでできているのですが、ブラウザ側でのレンダリングを行うSingle Page Aplication（以下、SPA）だけでなく、サーバサイドでのレンダリング（以下、SSR）が可能。それにより、SEO上のクローリング対策、ページスピードの向上などが期待できるとのこと。

Expoの
Using Next.js with Expo for Web - Expo Documentation
というページに、Expoでの使い方が書かれてありました。

既存のプロジェクトに追加するなどもあり、やってみたのですがうまく動かず。とりあえず、書かれてる通りに新規作成からテスト。
まずExpoの環境などは最新に上げときます。
また、パッケージ管理にnpmでなくてyarnが必要になります。

npx create-react-native-app -t with-nextjs
でプロジェクトを作成
yarn next dev
でスタートです。
http://localhost:3000/　に行くと
下記のようなページが表示されれば成功！

ちなみに、ここでいつも通り
expo start
にて、スマホアプリで動くか試したところ問題なし。
またブラウザで動かすReact版でも動くか試したところ、問題なく同じものが表示されました。
単純なので、違いがわからず。
  "devDependencies": {
　　"@babel/core": "^7.12.9",
       "@expo/next-adapter": "~2.1.52"
}

 開発用ライブラリにexpo/next-adapterが入ってるぐらい。
Expoを使うメリットとしては、React Nativeでコードを書くと
それをReactに変換してWebの開発もできることだったので、Next.jsに変換してくれるのかとなりますでしょうか。

因みに既存のプロジェクトに後からnext.js対応にすることもできるようなこと記載ありましたが、試したところいろいろとエラーが出るようなのと既存プロジェクトをnext.js対応に完全に変換するわけではなさそうです。