OpenAIが提供するChatKit StarterアプリをTanstack Startへ移行した話
概要
以前から気になっていたTanStack StartがついにRCとなったので、何か始めたいと思った時に、OpenAIが先日リリースしたChatKitのStarterアプリがNext.jsで公開されていたので、この際StarterアプリをTanStack Startに移行してみるのはどうか？と思い取り組んでみました。以下はその記録です。
本家
移行結果
移行した結果はこちらになります。
移行手順
公式ガイドに沿って移行
まずはTanStack Startが提供しているマイグレーションガイドに従って移行を行いました。
その後、環境変数をNEXT_PUBLIC_*からimport.meta.env.VITE_*へ変更
比較的小規模なアプリだったので、1時間程度で完了しました。
Start向けに追加のセットアップ
移行後、TanStack Start向けのセットアップを行いました。ここではTanStack Startが提供しているサンプルアプリを元にdevtoolsの導入や、eslintをNext.jsからTanStack Start向けに切り替えるなどを行いました。またディレクトリ構成もNext.jsからTanStack Start向けの構成にシフトしました。
参考にしたテンプレート:
複雑なコンポーネントをリファクタリング
本家のリポジトリで気になったのは、チャット画面を表示するコンポーネントが必要以上に複雑だと感じていたので、リファクタリングを行いました。
本家：
僕がリファクタリングしたもの：
ここではChatKitコンポーネントが、サーバー側から認証情報を取得する箇所があり、それをどうしてもTanstack Queryを使いたかったので、少々時間がかかりました。
Nitro V2プラグインの導入
TanStack StartはNitroというツールキットを使用しています。これを利用することでTanStack StartはCloudflare、AWS Amplify、Netlifyなど異なるホスティングサービスにて、デプロイできるようになっています。 先日のViteConfにて、Nitro V3が発表されましたが、V3はまだalphaバージョンなので、V2を継続して利用するための措置を行った方が安全だそうです。なので手順に従ってV2プラグインを導入しました。
つまづいた点
CSSが上手く読み込まれない
アプリの初期読み込み時に、cssを適用されていない状態のアプリがレンダリングされていました。結論から言えば__root.tsxにてcssを読み込む必要があったので修正を行いました。
気になった点
JSDoc不足
関数や、パラメーターに対してJSDocが表示されず、「これってなんで必要なの？」とか「これとこれの違いは何?」など気になる点が幾つがありました。例えば:
- TanStack Query導入時に、
router.tsxにて定義されるsetupRouterSsrQueryIntegration関数に対してJSDocがなく、その必要性がよくわからなかった。(おそらくloaderでTanStack Queryを利用するのに必要？) -
__root.tsxにて<Outlet />を使うのと、shellComponentを使う違い。これは公式ドキュメントを探しても見つかりませんでした。
<Outlet />を使うパターン
shellComponentを使うパターン
これらの点に関しては、ドキュメントを追記するなど貢献する機会があるなーと感じました。
感想
CSSが上手く読み込めないという箇所でつまづきましたが、それ以外はスムーズな移行ができました。今後はTanStack StartでもRSCが導入される予定なので、それにも期待です。また、より複雑なNext.jsアプリをTanStack Startへ移行することで知見を得られそうなので、時間がある時に取り組んでみようと思います。加えて、Nitro V3にて実装されたものが、そのままTanStack Startにて利用できるようになる可能性が高いので、そちらも触れてみようと思います。
Discussion