next.config.ts

// import { VariableCssPlugin } from '#/plugins/VariableCssPlugin';
import { getEnv } from '@/utils/envUtils';
import type { NextConfig } from 'next';
import createNextIntlPlugin from 'next-intl/plugin';
import { DefinePlugin } from 'webpack';
// import './src/libs/env';

const withNextIntl = createNextIntlPlugin('./src/i18n/request.ts');

// const variableCssPlugin = new VariableCssPlugin({
//   variablesPath: path.resolve(__dirname, 'config/theme/figmaColors.js'),
//   outputPath: path.resolve(__dirname, 'src/app/variables.css'),
// });
// const iconsPlugin = new IconsPlugin({
//   inputPath: path.resolve(__dirname, 'src/assets/icons'),
//   outputPath: path.resolve(__dirname, 'src/assets/react-icons'),
// });

const nextConfig: NextConfig = {
  output: 'standalone',
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },
  eslint: {
    dirs: ['.'],
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreDuringBuilds: true,
  },
  poweredByHeader: false,
  reactStrictMode: true,
  // swcMinify: true,
  experimental: {
    optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
    // turbo: {
    //   rules: {
    //     '*.svg': {
    //       loaders: ['@svgr/webpack'],
    //       as: '*.js',
    //     },
    //   },
    // },
  },
  env: getEnv(),
  webpack(config, options) {
    // Grab the existing rule that handles SVG imports
    const fileLoaderRule = config.module.rules.find((rule: any) =>
      rule.test?.test?.('.svg'),
    );

    config.module.rules.push(
      // Reapply the existing rule, but only for svg imports ending in ?url
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/, // *.svg?url
      },
      // Convert all other *.svg imports to React components
      {
        test: /\.svg$/i,
        issuer: fileLoaderRule.issuer,
        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
        use: ['@svgr/webpack'],
      },
      {
        test: /\.js\?.*$/, // Match JavaScript files with query strings
        resourceQuery: /url/, // *.svg?url
        use: [
          {
            loader: 'babel-loader', // You can replace this with your own loader if needed
            options: {
              presets: ['next/babel'],
            },
          },
        ],
      },
    );

    // Modify the file loader rule to ignore *.svg, since we have it handled now.
    fileLoaderRule.exclude = /\.svg$/i;

    config.plugins.push(
      new DefinePlugin({
        'process.env.VERSION': JSON.stringify(options.buildId),
      }),
    );

    if (
      process.env.NODE_ENV === 'development' &&
      options.isServer &&
      options.nextRuntime === 'nodejs'
    ) {
      // config.plugins.push(iconsPlugin);
      // config.plugins.push(variableCssPlugin);
    }

    return config;
  },
};

export default withNextIntl(nextConfig);