How to configure next.config.js file on right way

In my next.config.js I have the following configuration:

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
const withFonts = require('next-fonts');

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

Last thing which I need to add here is next-fonts plugin.

I am not sure how to export withFounts in the right way.

I need next-fonts plugin to be able to use 'fonts' icons.

Answer

You can do this:

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

You can try to use next-compose