Next.jsを段階的に導入する

Next.jsは段階的な導入のために設計されました。Next.jsを使用すると、既存のコードを使い続けながら、必要な量のReactを追加できます。小さく始め、徐々にページを追加していくことで、完全な書き換えを避けて機能開発の停滞を防ぐことができます。

多くの企業は、コスト削減、開発者の生産性向上、顧客への最高の体験提供のために、技術スタックを最新化する必要があります。コンポーネント駆動開発は、現代のコードベースのデプロイ速度と再利用性を大幅に向上させました。

そして、月に800万回以上のダウンロードを記録するReactは、開発者にとって主要なコンポーネント駆動型開発の選択肢です。本番環境向けのReactフレームワークであるNext.jsは、Reactを段階的に導入することを可能にします。

動機

ますますモバイル化が進む世界では、Core Web Vitalsを改善し追跡することが成功に不可欠です。顧客は世界中に分散しており、インターネット速度も様々です。ページの読み込みやアクションの完了に費やされる余分な1秒（またはミリ秒）が、販売、インプレッション、またはコンバージョンの差となる可能性があります。

技術スタックを最新化する場合、次のような課題に直面するかもしれません

お使いのアプリケーションには、理解が難しく、完全に書き換えるには何年も（そして数百万ドルも）かかるレガシーコードが何年分も蓄積されています。
アプリケーションのサイズと複雑さが増すにつれて、ページの読み込み時間が_増大し続けています_。単純なマーケティングページでさえ、最も複雑なページと同じくらい遅いです。
開発チームを拡大しようとしていますが、既存のコードベースに開発者を追加する際に問題に直面しています。
CI/CDおよびDevOpsプロセスが古く、開発者の生産性を低下させ、新しい変更を安全かつ確実に展開することが困難です。
お使いのアプリケーションはモバイルデバイスに最適化されておらず、アプリケーションの他の部分を壊さずにグローバルページスタイルを更新することは不可能です。

何かをする必要があることは分かっているものの、どこから手をつければ良いのか途方に暮れるかもしれません。Next.jsを段階的に導入することで、上記の課題を解決し、アプリケーションを改善し始めることができます。既存の技術スタックにNext.jsを導入するためのいくつかの戦略について説明しましょう。

戦略

サブパス

最初の戦略は、特定のサブパス以下のすべてがNext.jsアプリを指すように、サーバーまたはプロキシを設定することです。例えば、既存のウェブサイトがexample.comにある場合、example.com/storeがNext.jsのEコマースストアを提供するようにプロキシを設定することができます。

basePathを使用すると、Next.jsアプリケーションのアセットとリンクを新しいサブパス/storeで自動的に動作するように設定できます。Next.jsの各ページは独自のスタンドアロンルートであるため、pages/products.jsのようなページはアプリケーション内でexample.com/store/productsにルーティングされます。

next.config.js

module.exports = {
  basePath: '/store',
};

basePathの詳細については、ドキュメントをご覧ください。

(注: この機能はNext.js 9.5以降で導入されました。それ以前のバージョンのNext.jsを使用している場合は、試す前にアップグレードしてください。)

リライト

2番目の戦略は、ドメインのルートURLを指す新しいNext.jsアプリを作成することです。その後、next.config.js内でrewritesを使用して、一部のサブパスを既存のアプリにプロキシすることができます。

例えば、example.comから提供されるNext.jsアプリを以下のnext.config.jsで作成したとします。このNext.jsアプリに追加したページ（例: pages/about.jsを追加した場合の/about）へのリクエストはNext.jsによって処理され、その他のルート（例: /dashboard）へのリクエストはproxy.example.comにプロキシされます。

next.config.js

module.exports = {
  async rewrites() {
    return [
      // we need to define a no-op rewrite to trigger checking
      // all pages/static files before we attempt proxying
      {
        source: '/:path*',
        destination: '/:path*',
      },
      {
        source: '/:path*',
        destination: `https://proxy.example.com/:path*`,
      },
    ];
  },
};

リライトの詳細については、ドキュメントをご覧ください。

モノレポとサブドメインを使用したマイクロフロントエンド

Next.jsとVercelを使用すると、マイクロフロントエンドを容易に導入し、モノレポとしてデプロイできます。これにより、サブドメインを使用して新しいアプリケーションを段階的に導入することが可能になります。マイクロフロントエンドの利点をいくつか挙げます。

より小さく、より一貫性があり、保守しやすいコードベース。
疎結合で自律的なチームを持つ、よりスケーラブルな組織。
フロントエンドの一部を、より段階的な方法でアップグレード、更新、あるいは書き換える能力。

Vercelにデプロイされたモノレポのアーキテクチャ。

モノレポが設定されたら、通常通りGitリポジトリに変更をプッシュするだけで、接続しているVercelプロジェクトにコミットがデプロイされるのが確認できます。古くなったCI/CDプロセスにさようならしましょう。

Git統合によって提供されるデプロイURLの例。

結論

Next.jsは、既存の技術スタックに段階的に導入できるように設計されています。Vercelプラットフォームは、GitHub、GitLab、Bitbucketとのシームレスな統合により、あらゆるコード変更に対してデプロイプレビューを提供し、共同作業を可能にします。

Fast Refreshを使用してローカルで即座に変更をプレビューし、開発者の生産性を向上させます。
変更をプッシュしてブランチプレビューを作成し、関係者との共同作業に最適化します。
PRをマージすることで、Vercelを使用して本番環境にデプロイします。複雑なDevOpsは不要です。

詳細については、サブパスとリライトについて読むか、マイクロフロントエンドの例をデプロイしてください。