背景
クライアントはReact SPAで事業を立ち上げ、短期間で機能を増やしていました。しかし、公開ページとアプリ画面が同じクライアントサイド構成に乗っていたため、SEO、表示速度、SNS共有、コンテンツ運用、言語対応に限界が出始めていました。そこで、既存Reactの良さを残しつつ、Next.jsへ段階的に移行するプロジェクトを開始しました。
課題
最大の課題は、稼働中のReactアプリを止めずに移行することでした。既存ルーティング、認証、API通信、コンポーネント、デザインシステムを壊さず、SEO対象ページだけをNext.jsのApp Router、metadata、SSG/SSRへ移す必要がありました。同時に、日本語・英語ページのhreflang、sitemap、canonicalも整える必要がありました。
移行戦略
ページを役割で分類
サービスページ、ブログ、ケーススタディ、会社情報など検索対象ページをNext.jsへ移行。ログイン後のアプリ機能は既存Reactの考え方を活かして段階的に整理しました。
App Routerとmetadataへの移行
Next.js App Routerでルート構造を再設計し、generateMetadata、canonical、Open Graph、Twitter Card、hreflangをページ単位で管理できるようにしました。
SSR/SSGと動的ルートの設計
ブログやケーススタディは静的生成、必要なページはSSR、アプリ内部はクライアントコンポーネントとして分離し、SEOとアプリ体験の両方を成立させました。
既存React資産の再利用
コンポーネント、UIライブラリ、フォーム、APIクライアントを可能な範囲で再利用。移行コストを抑えながら、Next.jsの利点を取り込める構成にしました。
検索と問い合わせの検証
ビルド後にsitemap、robots、静的HTML、メタタグ、画像alt、内部リンク、問い合わせCTAを確認し、Googleと実ユーザーの両方に伝わる状態に整えました。
結果
- React SPAの公開ページをNext.jsのSEO対応ページへ移行
- 初期HTMLにページ固有の本文、title、description、canonical、schemaを配信
- 日英ページのhreflangとsitemap構造を整理
- 既存Reactコンポーネントを活かし、移行コストとリスクを抑制
- 無料相談・問い合わせへの導線を強化
結論
ReactからNext.jsへの移行は、単なるフレームワーク変更ではありません。検索に強い公開ページ、アプリらしい操作感、日英SEO、問い合わせ獲得を同時に設計するための事業判断です。IT Support in Tokyoでは、既存Reactアプリを分析し、どのページをSSR/SSG化すべきか、どの機能をクライアントサイドに残すべきかを整理したうえで、段階的なNext.js移行を支援します。検索流入と問い合わせを増やしたいReactアプリは、ぜひご相談ください。