How to add less and svg support to Nextjs

Have you ever face a situation where you want to use less and SVG images with nextjs and you don’t want to spend time making configuration with webpack. Honestly webpack configuration is not that straight forward. Still in 2020 webpack config feels too complicated to even experienced developers. In this article we will gonna add support for less and svg images to Nextjs.

Less support

Less is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets and run on the client side or server side. In other words less includes a lot of features along with normal css.

To add the support of less to nextjs you need to install two packages @zeit/next-less and less from npm.

npm install --save less @zeit/next-less

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

Add less config with just 2-3 lines.

const withLess = require('@zeit/next-less');

module.exports = withLess({
  /* config options here */
});

And that’s it now you app supports less. Just try adding a less file and import in your app.

SVG support

Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999.

Adding svg support to frontend frameworks or library is always interesting. To add the support we will gonna need a package for that i.e next-images.

npm install --save next-images

After the installation just add image config to next.config.js file.

const withImages = require('next-images');
module.exports = withImages();

That’s it. To use the svgs just add a file svg file or a jsx file.

To set the images in background always use .svg format and to render the svg images use .jsx to render as a component.

import { BgLeafIcon } from '../images'; //mage.svg
...
  <div
      className="bg-image"
      style={{ backgroundImage: `url(${BgLeafIcon})` }}
    >

or you can use as a component.

import { BgLeafIcon } from '../images'; //mage.jsx
...
<BgLeafIcon/>

I hope this article will be helpful to you guys. Feel free to comment your valuable thoughts.

How to use Cookie in React