كيفية تكوين ملف next.config.js بالطريقة الصحيحة

يمكنك فعل التالي

module.exports = withCSS(withFonts(withSass(
    withImages({
        distDir: '../_next',
        webpack(config) {
            return config;
        }
    })
)))

يمكنك محاولة استخدام  next-compose, تساعدك بتكوين ملف next.config.js بطريقة بسيطة , يمكنك تثبيتها باستخدام الامر التالي

npm install -D next-compose

أما عن استخدامها فهي بهذا الشكل, مثال بسيط مع حزم TypeScript و Sass:

const withTS = require('@zeit/next-typescript')
const withSass = require('@zeit/next-sass')
const compose = require('next-compose')

const tsConfig = {/** ts config here */}
const sassConfig = {/** sass config here */}

module.exports = compose([
  [withTS, tsConfig],
  [withSass, sassConfig],
  {
    webpack: (config) => {
      /**some special code */
      return config
    }
  }
])

مثال على إنشاء vendor.css و app.css من ملحقات إدخال مختلفة:

const withLess = require('@zeit/next-less')
const withSass = require('@zeit/next-sass')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const commonsChunkConfig = require('@zeit/next-css/commons-chunk-config')
const compose = require('./scripts/next-compose')}

const extractVendorCSSPlugin = new ExtractTextPlugin('static/vendor.css')
const extractAppCSSPlugin = new ExtractTextPlugin('static/app.css')

module.exports = compose([
  [withLess, {
    cssLoaderOptions: { modules: false },
    lessLoaderOptions: { /** less loader options */ },
    extractCSSPlugin: extractVendorCSSPlugin
  }],
  [withSass, {
    cssLoaderOptions: {
      modules: true,
      localIdentName: '[local]-[hash:base64:5]',
    },
    sassLoaderOptions: { /** sass loader options */ },
    extractCSSPlugin: extractAppCSSPlugin,
  }],
  {
    webpack(config, options) {
      config.plugins.push(extractVendorCSSPlugin)
      config.plugins.push(extractAppCSSPlugin)

      if (!options.isServer) {
        config = commonsChunkConfig(config, /\.(less|scss|sass)$/)
      }

      return config
    }
  }
])