How to add less and css support to Nextjs

Have you searched a lot in Google and Stackoverflow and don’t find a solution for this problem. Let me “halp” you.

Here we go!

To add support of less on Nextjs you need install three packages next-with-less, less and less-loader.

npm install --save next-with-less less less-loader

After the package installation include or create a file named next.config.js in root of your project.

Add less config on next.config.js.

const withLess = require('next-with-less')
module.exports = withLess({
  future: {
    webpack5: true,
  },
})

Thats all folks!