素のReactからNext.jsへ: 移行の旅とその解決
ライフイズテックのサービス開発部 学校プロダクトグループに所属している程です。
Reactをベースとしたウェブアプリケーションを開発しているうちに、サーバサイドレンダリングや静的サイト生成などのNext.jsのメリットに引かれ、我々のプロジェクトをNext.jsに移行する決意をしました。この記事では、その際に遭遇した課題やエピソードを中心に、我々の経験を共有します。
1. ルーティングの再設計
課題:
React Routerを用いていた我々の既存のアプリケーションと、Next.jsのファイルシステムベースのルーティングとの間で乖離が生じました。
解決策:
pages/ディレクトリ内に各ページのコンポーネントを配置し、それに基づくルーティング構造を採用しました。特定のルートパラメーターを使用する場合は、[param].jsxのようなブラケット構文を使用しました。
2. データのフェッチ
課題:
Reactのアプリでは、クライアントサイドでデータをフェッチしていましたが、Next.jsのSSRやSSGの機能を活用したかった。
解決策:
getServerSidePropsやgetStaticPropsを使用して、データのフェッチをページの読み込み時に行うように変更しました。これにより、ページのロード時に必要なデータを持ってくることができ、パフォーマンスの向上を実現しました。
3. スタイリングの調整
課題:
既存のReactアプリでは、CSS Modulesを使っていませんでしたが、Next.jsではこれがデフォルトのスタイリング方法として推奨されていました。
解決策:
CSS-in-JSライブラリ（例: styled-components）を使っていた場合、そのまま移行が可能でした。しかし、SCSSや他のスタイリング手法を使用していた場合、それをCSS Modulesに変換する必要がありました。
4. 静的ファイルの扱い
課題:
Reactアプリケーションでは、publicディレクトリ外の場所に静的ファイルを配置していました。
解決策:
Next.jsではpublic/ディレクトリを静的ファイルの置き場として提供しているため、静的ファイルをこのディレクトリに移動させました。そして、アプリケーション内でこれらのファイルを参照する際には、ルートからのパス（/image.png）を指定しました。
まとめ
ReactからNext.jsへの移行時には、さまざまな調整や再設計が求められました。しかし、これらの変更を通じて、Next.jsがもたらす機能や利点を最大限に活用することができました。移行の過程で、適切なドキュメントやコミュニティの助けを常に受けており、それによって多くの課題を乗り越えることができました。さらに、SREチームやQAチームの協力のもと、スムーズに移行作業を進めることができました。この結果、チームメンバーからも開発のしやすさや効率が向上したとの感想を多数いただくことができました。
ライフイズテック サービス開発部では、気軽にご参加いただけるカジュアルなイベントを実施しています。開催予定のイベントは、 connpass のグループからご確認ください。興味のあるイベントがあったらぜひ参加登録をお願いいたします。皆さんのご参加をお待ちしています！
Discussion