Example next.config.js to show bundle compilation time in development and bundle stats in production

next.config.js

const WebpackBar = require('webpackbar')
const withPlugins = require('next-compose-plugins')
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true'
})

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  use: ['babel-loader', '@mdx-js/loader']
})

module.exports = withPlugins([
  [withMDX],
  [withBundleAnalyzer]
], {
  stats: 'detailed',
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config
    config.plugins.push(new WebpackBar({
      name: 'Bundle'
    }))

    // Important: return the modified config
    return config
  },
  pageExtensions: ['js', 'jsx', 'md', 'mdx']
})