next.config.js

const withPWA = require("next-pwa");

// modifies Next.js's internal webpack config to add autogenerated typings for css modules
const withTypedCssModules = config => {
  const cssLoaderRegex = /(?<!post)css-loader/;
  const typingsForCssModulesLoader = {
    loader: "@teamsupercell/typings-for-css-modules-loader",
    options: {
      disableLocalsExport: true,
      verifyOnly: process.env.NODE_ENV === "production",
      banner: `
// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY

`.trimStart(),
    },
  };

  // looking for the webpack rules where `css-loader` is specified
  const { oneOf } = config.module.rules.find(rule => Array.isArray(rule.oneOf));
  const rules = oneOf.filter(rule => Array.isArray(rule.use));

  rules.forEach(rule => {
    const cssLoaderIndex = rule.use.findIndex(loader => cssLoaderRegex.test(loader.loader));
    // no `css-loader` here -> skip
    if (cssLoaderIndex === -1) {
      return;
    }
    // webpack loaders are executed in reverse order
    // we want to inject the typings loader after `css-loader`,
    // but before other loaders `style-loader` or `mini-css-extract`
    rule.use.splice(cssLoaderIndex, 0, { ...typingsForCssModulesLoader });
  });

  return config;
};

module.exports = withPWA({
  reactStrictMode: true,
  images: {
    domains: [
      "drive.google.com",
      "acmucsd.s3.us-west-1.amazonaws.com",
      "i.imgur.com",
      "media.licdn.com",
      "mojeanmac.github.io"
    ],
  },
  webpack(config) {
    config = withTypedCssModules(config);
    return config;
  },
  pwa: {
    dest: "public",
    register: true,
    skipWaiting: true,
    disable: process.env.NODE_ENV === "development",
  },
});