How to properly setup bundle analyzer?

[Elindo586]

Summary

From reference here:
https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer?utm_source=lighthouse&utm_medium=devtools

npm install @next/bundle-analyzer

then use inside next.config.js

The way I have it is:

/** @type {import('next').NextConfig} */

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

// then my config with a bunch of itmes in the next lines.

const nextConfig = {
  reactStrictMode: true,
  productionBrowserSourceMaps: true,

  compiler: {
    styledComponents: true,
  },

  async rewrites() {
    return {
      afterFiles: [{ source: "/:path*", destination: "/_404/:path*" }],
    };
  },

// then the last line below.

module.exports = withBundleAnalyzer({ nextConfig });

^^ This gives me error:

⚠ Invalid next.config.js options detected: 
 ⚠     Unrecognized key(s) in object: 'nextConfig'
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config

Additional information

No response

Example

No response

[c0b41]

Correct way to call this
module.exports = withBundleAnalyzer(nextConfig);

[Elindo586]

Thank you! that worked!