next、react、react-domのバージョンを上げる

[takashi0602]

概要

タイトル通りnext、react、react-domのバージョンを上げましたのでご確認よろしくお願いします。
また、nodeもlatestLTSである18.14.1まで上げましたので、ローカルのnodeのバージョンを上げて確認お願いします。
（ついでにTSもあげた）

• next ... 12系の最新
• react / react-dom ... 18.2.0(latest)
  • nextの公式曰く、react、react-domの最小バージョンは18.2.0とのこと（以下参照）
  • https://nextjs.org/docs/messages/react-version
• TypeScript ... 4.9.5(latest)

その他

Storybook で React v18 を使用するには v7 系を使用する必要があるが、ベータ版なのと変更点が多いためこのPRには含めない

[takashi0602]

Nextjs を v13 系にしてみるため Draft にしました

[tyokinuhata]

また、nodeもlatestである18.14.1まで上げましたので

細かいけどLTSの最新な気がする: https://nodejs.org/ja/

[tyokinuhata]

• Node.js 12.22.0 または、それ以降
• MacOS, Windows (WSL を含む)、そして Linux をサポート

Next.jsのシステム要件的にもNodeのバージョンは上げても問題無さそう(という感想ｗ): https://nextjs-ja-translation-docs.vercel.app/docs/getting-started#%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E8%A6%81%E4%BB%B6

[tyokinuhata]

TypeScript ... 4.9.5(latest)

これ、問題は無さそうなんだけど、どこを探してもTSのEOLのスケジュールとか見当たらなかった、、、
今、どのバージョン以降でパッチの適用が行われているとかってどこを見ればいいんだろう、、、(LTSみたいな概念もなさそう？)
あとはNode.jsとかNext.jsとの依存関係とかってどんな感じなんだろう(例えばTS x.y.zを使うならNode.jsのx.y.z以上のバージョンが必要みたいな)

[tyokinuhata]

Storybook で React v18 を使用するには v7 系を使用する必要があるが、ベータ版なのと変更点が多いためこのPRには含めない

これ、Reactのバージョンだけ18系に上げてもStorybookの動作には影響無い感じ？

[tyokinuhata]

個人的にはまずNext12系の最新版の状態でマージしてしまって、13系の対応は別PRでやっても良いのかなという気がしてます。
というのも #150 は #149 の前段として、とりあえず今のNext.jsのバージョンを明示して分かりやすくする + そのバージョンで動作していることを保証するって部分が大きいのかなと

[takashi0602]

#152 (comment)
内部見た感じ @types/react が使ってるTSのバージョンが4.2系だったのでrevertしました🙏

---

これ、Reactのバージョンだけ18系に上げてもStorybookの動作には影響無い感じ？

React の18系やと createRoot を使ってレンダリングするねんけど、Storybook内やと17系のような形で render 使ってレンダリングしてそうで、以下の警告出てる感じっすね

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

参考: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

[tyokinuhata]

内部見た感じ @types/react が使ってるTSのバージョンが4.2系だったのでrevertしました🙏

逆に @types/react を上げて今のTSのバージョンに追随する路線もありそう

    "@types/node": "^15.0.2",
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.2",

その場合、このへんもまとめて上げる必要があるのかな？

[tyokinuhata]

React の18系やと createRoot を使ってレンダリングするねんけど、Storybook内やと17系のような形で render 使ってレンダリングしてそうで、以下の警告出てる感じっすね

なるほど、、、Nextが求めるReactの最小のシステム要件でwarning出るの辛いな、、、
ただStorybook内では17系の互換性モードみたいな感じで動作しているなら問題ないのかな(いつStorybookのベータ外れるんだろうｗ)

[takashi0602]

逆に @types/react を上げて今のTSのバージョンに追随する路線もありそう

以下みたいな形で修正してます🙏
@types/react の v18.0.28 内で使われているTSのバージョンが4.2系という感じです🙏

"@types/node": "18.14.0",
"@types/react": "18.0.28",
"@types/react-dom": "18.0.11",

---

ただStorybook内では17系の互換性モードみたいな感じで動作しているなら問題ないのかな(いつStorybookのベータ外れるんだろうｗ)

一応問題なく動作はしてるな
7系で記述が変わるので対応辛そうというところだけ共有しておきます😢

[tyokinuhata]

以下みたいな形で修正してます🙏
@types/react の v18.0.28 内で使われているTSのバージョンが4.2系という感じです🙏

これ、 @types/node とかだとまた別のTSのバージョンが使われてるって感じよな:thinking-face:
TS自体は4.2系で入ってるっぽいけど、大丈夫なんかなと思った: https://github.com/uyupun/official/blob/main/package.json#L59

[tyokinuhata]

一応問題なく動作はしてるな
7系で記述が変わるので対応辛そうというところだけ共有しておきます😢

なるほどな、Storybook以外だとなにか候補あるんだろうか、、、Storybookの７系に上げるほうが楽なんだろうか、、、

[takashi0602]

こちら最新のNextjsのバージョンに上げる方針になったためCloseします