كيفية تجزئة أسماء فئات CSS في Nextjs؟

NextJS لا يدعم تمرير الاعدادات الى webpack مباشرة

يمكنك بدل من ذلك تمرير الدالة webpack وتعديل اعدادات webpack داخل ملف اعداد next.config.js 

module.exports = {
  webpack(config, { buildId, dev, isServer, defaultLoaders, webpack }) {
    config.module.rules[3].oneOf.forEach((moduleLoader, i) => {
      Array.isArray(moduleLoader.use) &&
        moduleLoader.use.forEach((l) => {
          if (
            l.loader.includes("\\css-loader") &&
            !l.loader.includes("postcss-loader")
          ) {
            const { getLocalIdent, ...others } = l.options.modules;

            l.options = {
              ...l.options,
              modules: {
                ...others,
                localIdentName: "[hash:base64:6]", // هنا يمكنك تخصيص الاسم
              },
            };
          }
        });
    });
    return config;
  },
};

بالإضافة الى اجابة حسان, إذا كنت تريد تجزئة أسماء الفئات فقط في وضع production، فيمكنك استخدام process.env.NODE_ENV مع عبارة if. كالتالي

module.exports = {
  webpack(config, { buildId, dev, isServer, defaultLoaders, webpack }) {
    if (process.env.NODE_ENV === "production") {
      ...
      ...

      return config;
    } else {
      return config;
    }
  },
};