概要

Next.jsでのパフォーマンス向上には、バンドルサイズの最適化が重要です。バンドルサイズが大きくなると、ページの初期ロードが遅くなり、ユーザー体験に悪影響を与えます。本記事では、バンドルサイズを削減する具体的な方法を紹介し、パフォーマンス改善の手法を解説します。コード分割や未使用ライブラリの整理、@next/bundle-analyzerを活用したサイズ確認などのテクニックを説明します。

バンドルサイズの確認

まず、バンドルサイズを確認するために、@next/bundle-analyzerをインストールします。このツールは、各モジュールのサイズを可視化し、どの部分がボトルネックとなっているかを確認できます。

設定手順

  1. インストール

    yarn add -D @next/bundle-analyzer

  2. next.config.jsに以下を追加

    const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({});

  3. バンドルの分析

    ANALYZE=true yarn build

このコマンドで生成されたレポートから、どのライブラリが大きな容量を占めているかを確認し、改善点を特定します。

Dynamic Importを使ったコード分割

Next.jsではdynamic importを使用して、必要な時にのみ特定のモジュールを読み込むことができます。これにより、初期ロード時のバンドルサイズを最小化し、パフォーマンスが向上します。

実装例

import dynamic from 'next/dynamic';
// コンポーネントを動的にインポート
const DynamicComponent = dynamic(() => import('../components/MyComponent'), {
  loading: () => <p>Loading...</p>,  // 読み込み中の表示
});
export default function Home() {
  return <DynamicComponent />;
}

dynamic()を使うことで、コンポーネントが必要なタイミングでのみ読み込まれるため、初期バンドルサイズを削減できます。また、非同期処理のためにloadingプロパティでローディング中の表示もカスタマイズ可能です。

未使用ライブラリの削除

未使用のライブラリや重い依存関係を削除することも重要です。例えば、npx depcheckを使うことで未使用の依存関係をチェックできます。また、重いライブラリを軽量版に置き換えることも効果的です。

その他の最適化手法

  1. Tree Shaking:
    使用していないコードを自動的に削除する機能です。Next.jsはデフォルトでこの機能をサポートしていますが、外部ライブラリのインポート方法に注意を払い、不要なモジュールをインポートしないようにすることが重要です。
  2. CSSの最適化:
    CSSのバンドルサイズも大きくなりがちです。使用していないCSSを削除し、可能な限り軽量なフレームワークやスタイルシートを利用することが推奨されます。

まとめ

Next.jsのバンドルサイズを最適化することで、アプリの初期ロード時間を短縮し、全体のパフォーマンスを向上させることができます。@next/bundle-analyzerでサイズを可視化し、Dynamic Importや未使用ライブラリの削除といった手法を活用して、効率的なアプリケーションを構築しましょう。