next-global-css

A preset for nextjs allowing using 3d party libraries with global css.

⚠️ Be careful, this solution can be unstable due to nextjs updates.

🏗 Compatible

Current version works only for 10th version of nextjs or higher.

☄️ Install and usage

Installation:

npm i -PE next-global-css

Configure:

const { withGlobalCss } = require('next-global-css')

const withConfig = withGlobalCss()

module.exports = withConfig({
  /* Next.js config options here */
})

If your webpack configuration is already customized:

const { patchWebpackConfig } = require('next-global-css')

const nextConfig = {
  /* config options here */
  /* your already customized webpack option */
  webpack: (config, options) => {
    patchWebpackConfig(config, options)
  },
}

Allow css-modules from node-modules:

const { patchWebpackConfig } = require('next-global-css')
const webpackNodeExternals = require('webpack-node-externals')

module.exports = {
  reactStrictMode: true,
  webpack: (config, options) => {
    patchWebpackConfig(config, options)

    if (options.isServer) {
      config.externals = webpackNodeExternals({
        // Uses list to add this modules for server bundle and process.
        allowlist: [/design-system/],
      })
    }

    return config
  },
}

📜 License

Project is MIT licensed.