Next.js の段階的導入

Next.js は段階的な導入のために設計されています。Next.js を使用すると、既存のコードを引き続き利用し、必要に応じて React を追加（または削除）することができます。小さく始めて、徐々にページを増やしていくことで、全面的な書き換えを回避し、機能開発の遅延を防ぐことができます。

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

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

動機

ますますモバイル化が進む世界では、Core Web Vitals の改善と追跡が成功の鍵となります。顧客は世界中に分散し、インターネット速度も様々である可能性が高いです。ページの読み込みやアクションの完了を待つ時間（ミリ秒単位）が、セール、インプレッション、コンバージョンを分ける差となる可能性があります。

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

アプリケーションには、長年のレガシーコードがあり、理解が難しく、書き換えには数年（数百万ドル）かかるでしょう。
アプリケーションのサイズと複雑さが増すにつれて、ページ読み込み時間が長くなり続けています。シンプルなマーケティングページも、最も複雑なページと同じくらい遅いです。
開発チームをスケールアップしようとしていますが、既存のコードベースにさらに多くの開発者を追加するのに苦労しています。
古い 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 にルーティングされます。

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 にプロキシされます。

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*`,
      },
    ];
  },
};