next.config.mjs

import { withSentryConfig } from "@sentry/nextjs";
import path from "node:path";
import loaderUtils from "loader-utils";
import withNextIntl from "next-intl/plugin";

/**
 * Generates a unique hash-based identifier for CSS modules.
 *
 * @param {Object} context - The webpack loader context
 * @param {string} _ - Unused parameter (local name)
 * @param {string} exportName - The name of the exported class
 * @returns {string} A unique identifier for the CSS class
 */
const hashOnlyIdent = (context, _, exportName) => {
  try {
    return loaderUtils
      .getHashDigest(
        Buffer.from(
          `filePath:${path
            .relative(context.rootContext, context.resourcePath)
            .replace(/\\+/g, "/")}#className:${exportName}`
        ),
        "md5",
        "base64",
        6
      )
      .replace(/[^a-zA-Z0-9-_]/g, "_")
      .replace(/^(-?\d|--)/, "_$1");
  } catch (error) {
    console.error("Error in hashOnlyIdent:", error);
    return exportName; // Fallback to using the exportName as-is
  }
};

// Initialize Next.js Internationalization
const withNextIntlConfig = withNextIntl("./src/i18n.ts");

// Configuration constants
const SUPPORTED_LOCALES = [
  "en",
  "es",
  "fr",
  "de",
  "it",
  "pl",
  "ja",
  "ko",
  "zh-Hans",
  "zh-Hant",
];
const DEFAULT_LOCALE = "en";

/**
 * Security headers to be applied to all routes
 */
const securityHeaders = [
  { key: "X-XSS-Protection", value: "1; mode=block" },
  { key: "X-Frame-Options", value: "SAMEORIGIN" },
  { key: "X-Content-Type-Options", value: "nosniff" },
  { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
  { key: "X-Forwarded-Proto", value: "https" },
  {
    key: "Content-Security-Policy",
    value: `
								default-src 'self';
								script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.googleapis.com https://static.cloudflareinsights.com https://accounts.google.com;
								style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://accounts.google.com;
								img-src 'self' data: https://*.googleapis.com https://*.gstatic.com https://cdn.konpeki.co.uk https://res.cloudinary.com;
								font-src 'self' https://fonts.gstatic.com https://cdn.jsdelivr.net;
								connect-src 'self' https://*.googleapis.com https://cdn.konpeki.co.uk https://cdn.jsdelivr.net https://api.cloudinary.com https://lh3.googleusercontent.com https://around-nippon-c23abc28dc79.herokuapp.com https://aroundnippon-dev.konpeki.co.uk https://accounts.google.com;
								worker-src 'self' blob:;
                child-src 'self' blob:;
                frame-src 'self' https://accounts.google.com;
						`
      .replace(/\s{2,}/g, " ")
      .trim(),
  },
];

/**
 * Configures Webpack to use custom CSS module identifiers.
 *
 * @param {Object} config - The webpack configuration object
 * @returns {Object} The modified webpack configuration
 */
const configureWebpack = (config) => {
  try {
    const rules = config.module.rules
      .find((rule) => typeof rule.oneOf === "object")
      ?.oneOf.filter((rule) => Array.isArray(rule.use));

    for (const rule of rules || []) {
      for (const moduleLoader of rule.use) {
        if (
          moduleLoader.loader?.includes("css-loader") &&
          !moduleLoader.loader?.includes("postcss-loader") &&
          typeof moduleLoader.options?.modules === "object"
        ) {
          moduleLoader.options.modules.getLocalIdent = hashOnlyIdent;
        }
      }
    }

    return config;
  } catch (error) {
    console.error("Error in webpack configuration:", error);
    return config; // Return original config if there's an error
  }
};

/**
 * Next.js configuration object
 * @type {import('next').NextConfig}
 */
const nextConfig = withNextIntlConfig({
  reactStrictMode: true,
  i18n: {
    locales: SUPPORTED_LOCALES,
    defaultLocale: DEFAULT_LOCALE,
  },
  webpack: configureWebpack,
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: securityHeaders,
      },
    ];
  },
  async rewrites() {
    return [
      {
        source: "/api/maps/:path*",
        destination: "https://maps.googleapis.com/maps/api/:path*",
      },
    ];
  },
  logging: {
    level: "info",
    destination: "console",
  },
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "cdn.konpeki.co.uk",
        pathname: "/around-nippon/assets/**",
      },
      {
        protocol: "https",
        hostname: "res.cloudinary.com",
        pathname: `/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload/**`,
      },
      {
        protocol: "https",
        hostname: "maps.googleapis.com",
        pathname: "/maps/api/place/photo",
      },
      {
        protocol: "https",
        hostname: "aroundnippon-dev.konpeki.co.uk",
        pathname: "/**",
      }
    ],
  },
});

export default withSentryConfig(nextConfig, {
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options

  org: "jacob-walton",
  project: "around-nippon",

  // Only print logs for uploading source maps in CI
  silent: !process.env.CI,

  // For all available options, see:
  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

  // Upload a larger set of source maps for prettier stack traces (increases build time)
  widenClientFileUpload: true,

  // Automatically annotate React components to show their full name in breadcrumbs and session replay
  reactComponentAnnotation: {
    enabled: true,
  },

  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
  // This can increase your server load as well as your hosting bill.
  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
  // side errors will fail.
  tunnelRoute: "/monitoring",

  // Hides source maps from generated client bundles
  hideSourceMaps: true,

  // Automatically tree-shake Sentry logger statements to reduce bundle size
  disableLogger: true,

  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
  // See the following for more information:
  // https://docs.sentry.io/product/crons/
  // https://vercel.com/docs/cron-jobs
  automaticVercelMonitors: true,
});