expo webではなく、nextjsを使う

こんちは。

expo for webでnextjsが使えるらしい。とのことだったので、サクッと試そうと思ったのですが、盛大にハマったので、備忘録。

nextjsの導入

詳しくはこちらなのですが、npm7以降でpeerDependencies の扱い方が変わったらしいので、色々とエラーが出る。 --legacy-peer-deps をつけるとnpm6と同様にインストールしてくれるらしい。

公式ドキュメントの通りやるとエラーになるので、以下のようにやると進んだ。

npm i --save-dev @expo/next-adapter --legacy-peer-deps
npm i --legacy-peer-deps
yarn next-expo

localhost:3000で見れない

あとは、nextjsを起動したら、ブラウザなのにreact nativeがいい感じに表示されめでたしめでたしのはずが、見れない・・・

色々ググると next.config.js を以下に修正するといいとのことなので、修正したらうまくいった。

const { withExpo } = require("@expo/next-adapter");
const withPlugins = require("next-compose-plugins");

const withTM = require("next-transpile-modules")(["react-native-web"]);

module.exports = withPlugins(
  [withTM, [withExpo, { projectRoot: __dirname }]],
  {}
);

何も理解してない・・・。