バンドル最適化
外部パッケージをバンドルすることで、アプリケーションのパフォーマンスを大幅に改善できます。 デフォルトでは、アプリケーションにインポートされたパッケージはバンドルされません。これはパフォーマンスに影響を与えたり、外部パッケージが事前にバンドルされていない場合（例：モノレポや node_modules からインポートされた場合）に動作しない可能性があります。このページでは、パッケージバンドリングを分析し、設定する方法を説明します。
JavaScript バンドルの分析
@next/bundle-analyzer は、アプリケーションバンドルのサイズを管理するための Next.js プラグインです。各パッケージとその依存関係のサイズを視覚的に報告します。この情報を使用して、大きな依存関係を削除したり、コードを分割または遅延ロードしたりできます。
インストール
以下のコマンドを実行してプラグインをインストールします：
npm i @next/bundle-analyzer
# または
yarn add @next/bundle-analyzer
# または
pnpm add @next/bundle-analyzer次に、next.config.js にバンドルアナライザーの設定を追加します。
/** @type {import('next').NextConfig} */
const nextConfig = {}
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer(nextConfig)レポートの生成
バンドルを分析するには、以下のコマンドを実行します：
ANALYZE=true npm run build
# または
ANALYZE=true yarn build
# または
ANALYZE=true pnpm buildレポートがブラウザに3つの新しいタブで開きます。定期的にアプリケーションのバンドルを評価することで、長期的なアプリケーションのパフォーマンスを維持できます。
パッケージインポートの最適化
アイコンライブラリなどの一部のパッケージは、数百のモジュールをエクスポートするため、開発および本番環境でパフォーマンスの問題を引き起こす可能性があります。
next.config.js に optimizePackageImports オプションを追加することで、これらのパッケージのインポート方法を最適化できます。このオプションは、実際に使用するモジュールのみをロードしながら、多数の名前付きエクスポートを使用するインポート文の利便性を維持します。
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
optimizePackageImports: ['icon-library'],
},
}
module.exports = nextConfigNext.js は一部のライブラリを自動的に最適化するため、optimizePackageImports リストに含める必要はありません。完全なリストをご覧ください。
特定のパッケージのバンドル
特定のパッケージをバンドルするには、next.config.js の transpilePackages オプションを使用できます。このオプションは、事前にバンドルされていない外部パッケージ（モノレポや node_modules からインポートされたパッケージなど）をバンドルする際に便利です。
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages: ['package-name'],
}
module.exports = nextConfigすべてのパッケージをバンドル
App Router のデフォルト動作として、すべてのパッケージを自動的にバンドルするには、next.config.js の bundlePagesRouterDependencies オプションを使用できます。
/** @type {import('next').NextConfig} */
const nextConfig = {
bundlePagesRouterDependencies: true,
}
module.exports = nextConfigバンドリングから特定のパッケージを除外
bundlePagesRouterDependencies オプションが有効になっている場合、next.config.js の serverExternalPackages オプションを使用して、特定のパッケージを自動バンドリングから除外できます：
/** @type {import('next').NextConfig} */
const nextConfig = {
// App と Pages ルーターで外部パッケージを自動的にバンドル：
bundlePagesRouterDependencies: true,
// App と Pages ルーターの両方でバンドルから特定のパッケージを除外：
serverExternalPackages: ['package-name'],
}
module.exports = nextConfig