問題

next.config.tsにはbundle analyzerの設定を入れているのに、npm run devでページを開くといつも通りにしか表示されない

config

next.config.ts

import NextBundleAnalyzer from "@next/bundle-analyzer";
import type { NextConfig } from "next";

const withBundleAnalyzer = NextBundleAnalyzer({
  enabled: process.env.ANALYZE === "true",
});

const nextConfig: NextConfig = withBundleAnalyzer({
  webpack: (config) => {
    config.module.rules.push({
      test: /\.txt$/i,
      use: "raw-loader",
    });
    return config;
  },
  experimental: {
    turbo: {
      rules: {
        "*.txt": {
          loaders: ["raw-loader"],
          as: "*.js",
        },
      },
    },
  },
});

export default nextConfig;

解決法

turbopackを使用しない

原因

next/bundle-analyzerはwebpackプラグインであるため、turbopack環境下では機能しない。turbopackではなくwebpackを使うと通常通り表示される。