How to use nextjs with multiple plugins - reactjs

Question

I'm using Nextjs with a with-antd boilerplate and it comes with a preconfigured next.config.js file.
Looking like this;
/* eslint-disable */
const withCss = require('#zeit/next-css')
// fix: prevents error when .css files are required by node
if (typeof require !== 'undefined') {
require.extensions['.css'] = (file) => {}
}
module.exports = withCss()
I want to edit this configuration file and add configurations like exportPathMap.
Like this:
module.exports = {
exportPathMap: function () {
return {
'/': { page: '/' },
'/about': { page: '/about' },
'/p/hello-nextjs': { page: '/post', query: { title: 'Hello Next.js' } },
'/p/learn-nextjs': { page: '/post', query: { title: 'Learn Next.js is awesome' } },
'/p/deploy-nextjs': { page: '/post', query: { title: 'Deploy apps with Zeit' } }
}
}
}
But I have no idea how to implement that without breaking the withCss plugin, please help.

Answer 1

Solved this by realizing that next-plugins such as #zeit/next-css that I was using expect more next configurations that are passed as objects from the plugin.
Snippet from #zeit/next-css plugin.
module.exports = (nextConfig = {}) => {
return Object.assign({}, nextConfig, {
webpack(config, options) {
if (!options.defaultLoaders) {
throw new Error(
'This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade'
)
}
So with that figured out I fixed the exportPathMap as an object inside withCss.
module.exports = withCss({
exportPathMap: function() {
return {
'/': {page: '/'},
'/sevices': {page: '/services'},
'/about': {page: '/about'},
'/contacts': {page: '/contacts'},
}
}
})
That's it! 🙌🙌