mediahub-fe/next.config.mjs

import createNextIntlPlugin from "next-intl/plugin";
import nextra from "nextra";
import withBundleAnalyzer from "@next/bundle-analyzer";

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

const withNextIntl = createNextIntlPlugin();

const withNextra = nextra({
  theme: "nextra-theme-docs",
  themeConfig: "./theme.config.tsx",
});

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

const nextConfig = {
  // Performance optimizations
  experimental: {
    optimizePackageImports: [
      '@radix-ui/react-icons',
      'lucide-react',
      'react-icons',
      'framer-motion',
      'apexcharts',
      'recharts',
      'chart.js',
      'react-chartjs-2'
    ],
  },
  
  // Image optimization
  images: {
    formats: ['image/webp', 'image/avif'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    minimumCacheTTL: 60 * 60 * 24 * 30, // 30 days
    dangerouslyAllowSVG: true,
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
    remotePatterns: [
      {
        protocol: "https",
        hostname: "api.lorem.space",
      },
      {
        protocol: "https",
        hostname: "lh3.googleusercontent.com",
      },
      {
        protocol: "https",
        hostname: "a0.muscache.com",
      },
      {
        protocol: "https",
        hostname: "avatars.githubusercontent.com",
      },
      {
        protocol: "https",
        hostname: "i.pravatar.cc",
      },
      { protocol: "https", hostname: "netidhub.com" },
      {
        protocol: "https",
        hostname: "netidhub.com",
      },
    ],
  },

  // Bundle optimization
  webpack: (config, { dev, isServer }) => {
    // Optimize bundle size
    if (!dev && !isServer) {
      config.optimization.splitChunks = {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
          },
          charts: {
            test: /[\\/]node_modules[\\/](apexcharts|recharts|chart\.js|react-chartjs-2)[\\/]/,
            name: 'charts',
            chunks: 'all',
          },
          maps: {
            test: /[\\/]node_modules[\\/](@react-google-maps|leaflet|react-leaflet)[\\/]/,
            name: 'maps',
            chunks: 'all',
          },
        },
      };
    }
    return config;
  },

  // Compression
  compress: true,
  
  // Power by header removal
  poweredByHeader: false,
  
  // ESLint configuration
  // eslint: {
  //   ignoreDuringBuilds: true,
  // },
};

export default bundleAnalyzer(withNextIntl(withNextra(nextConfig)));