تقویت پروژه های Next.js با پشتیبانی CSS با استفاده از «@zeit/next-css»

در selftools.com، ما از قدرت Next.js در ارتباط با Firebase برای توسعه بیش از 30 برنامه وب پویا و مقیاس پذیر استفاده کرده ایم. تجربه گسترده ما بهترین روش‌ها و تکنیک‌های بهینه‌سازی را به ما آموخته است، یکی از آنها شامل ادغام CSS سنتی در پروژه‌های Next.js برای افزایش قابلیت‌های استایل‌سازی است. این مقاله به چگونگی بهینه سازی پیکربندی «next.config.js» برای پشتیبانی از فایل های CSS با استفاده از افزونه «@zeit/next-css» می پردازد.

درک کد

const withCSS = require('@zeit/next-css');
module.exports = withCSS({
  webpack(config, options) {
    config.module.rules.push({
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader']
    });
    return config;
  }
});

این قطعه کد یک جزء مهم برای فعال کردن CSS سنتی در پروژه های Next.js شما است. «@zeit/next/css» ادغام فایل‌های CSS در ساخت Next.js شما را ساده می‌کند. در اینجا به تفکیک هر بخش از کد آمده است:

• require('@zeit/next-css'): این بسته لازم برای مدیریت CSS در پروژه های Next.js را وارد می کند.

• module.exports = withCSS({...}): این تابع پیکربندی Next.js شما را با تنظیمات اضافی برای مدیریت فایل‌های CSS می‌پوشاند و به طور موثر فرآیند ساخت را بهبود می‌بخشد.

• webpack(config, options): تابعی است که پیکربندی پیش فرض Webpack مورد استفاده توسط Next.js را تغییر می دهد. این تابع برای تعیین نحوه مدیریت فایل‌های CSS در طول فرآیند ساخت بسیار مهم است.

• config.module.rules.push(...): این قسمت یک قانون جدید به پیکربندی Webpack اضافه می کند. این قانون فایل‌هایی را که به «.css» ختم می‌شوند با لودرهای مشخص شده هدف قرار می‌دهد.

  • test: /\.css$/: این عبارت منظم با تمام فایل های css. در پروژه شما مطابقت دارد.
  • use: ['style-loader', 'css-loader', 'postlog-loader']: این لودرها برای پردازش فایل های CSS ضروری هستند. این چیزی است که هر کدام انجام می دهند:
    • style-loader: CSS را از طریق a به DOM تزریق می کند tag.
    • css-loader: تفسیر می کند @import و url() پسندیدن import/require() و آنها را حل خواهد کرد.
    • postcss-loader: CSS را با PostCSS پردازش می کند، ابزاری برای تبدیل استایل ها با افزونه های JS.