Export Module in next.config.js

Question

please how do I combine these 2 and export

module.exports = withCSS(withImages())

module.exports = {
  publicRuntimeConfig: {
    API_URL: 'api_url'
  },
}

Answer 1

As documented here. You pass your plugins, and then the config.

module.exports = withCSS(withImages({
    publicRuntimeConfig: {
        API_URL: 'api_url'
    },
}));

Edit: Example Usage.

Answer 2

Simply put them together in your final object :

module.exports = {
  publicRuntimeConfig: {
    API_URL: 'api_url'
  },
  myCSS: withCSS(withImages())
}

You now just have to add '.myCSS' next to you imported variable to access the second element

Answer 3

You can use next-compose-plugins library to add multiple plugins in config.next.js file:

const withPlugins = require('next-compose-plugins');
const sass = require('@zeit/next-sass');

module.exports = withPlugins([
  [sass],
]);

Answer 4

You can expose it as a part of your configuration by attaching a property withCSS to the exported config object.

module.exports = {
  withCSS: withImages(),
  publicRuntimeConfig: {
    API_URL: 'api_url'
  },
}