【Next.js和訳】Migrating to Next.js/Incrementally Adopt Next.js
この記事について
株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。
この記事は、Migrating to Next.js/Incrementally Adopting Next.jsの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Incrementally Adopting Next.js
Next.js は段階的に導入できるように設計されています。Next.js では、既存のコードを使い続けながら、必要な分だけ（または少しだけ）React を追加することができます。小さく始めて段階的にページを増やしていくことで、全面的なリライトを避け、機能拡張の作業が脱線するのを防ぐことができます。
ストラテジー
Subpath
1 つ目の戦略は、特定のサブパスの下にあるすべてのものが Next.js アプリを指すように、サーバーやプロキシを設定することです。例えば、既存の Web サイトが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 をお使いの方は、アップグレードしてからお試しください。
Rewrites
2 つ目の方法は、あなたのドメインのルート URL を指す新しい Next.js アプリを作成することです。そして、next.config.js内のrewritesを使って、既存のアプリにプロキシされるサブパスを設定します。
例えば、次のようなnext.config.jsを使って、example.comから提供される Next.js アプリを作成したとしましょう。これで、この Next.js アプリに追加したページ（例：pages/about.jsを追加した場合は/about）へのリクエストは Next.js で処理され、それ以外のルート（例：/dashboard）へのリクエストはproxy.example.comにプロキシされることになります。
module.exports = {
async rewrites() {
return {
// すべてのNext.jsページ（ダイナミックルートを含む）をチェックした後と静的ファイルをチェックした後、他のリクエストをプロキシします。
fallback: [
{
source: '/:path*',
destination: `https://proxy.example.com/:path*`,
},
],
}
// Next.js < v10.1の場合は、代わりにno-op rewriteを使うことができます。
return [
// チェックを行うために、no-op rewriteを定義する必要があります。プロキシを試みる前に、すべてのpages/staticファイルをチェックするように
{
source: '/:path*',
destination: '/:path*',
},
{
source: '/:path*',
destination: `https://proxy.example.com/:path*`,
},
]
},
}
rewrites について詳しく知りたい方は、ドキュメントをご覧ください。
この機能はNext.js 9.5以降で導入されました。古いバージョンの Next.js をお使いの方は、試してみる前にアップグレードしてください。
モノレポとサブドメインによるマイクロフロントエンド
Next.js とVercelでは、マイクロフロントエンドを採用し、モノレポとしてデプロイすることが簡単にできます。これにより、サブドメインを使って新しいアプリケーションを段階的に採用することができます。マイクロフロントエンドのメリットをいくつか紹介します。
- コードベースが小さくなり、まとまりができ、メンテナンス性が向上します。
- 分離された自律的なチームによる、よりスケーラブルな組織。
- フロントエンドの一部を段階的にアップグレード、アップデート、または書き換えできる。
モノレポの設定が完了したら、通常通り Git リポジトリに変更をプッシュすると、接続している Vercel プロジェクトにコミットがデプロイされます。
結論
さらに詳しく知りたい方は、subpathとrewritesについてをご覧ください。また、マイクロフロントエンドを使った例をご紹介します。
Discussion