Next.js and

A quick share of my experiance with Next.js and .svg files.

I needed to display a bunch of .svg files on a Next.js app.

Using .svg files with Next.js super cool <Image /> component is not recommended since it can create unexpected behavior and lead to vulnerabilities if a security policy header is not defined.

So I needed to incorporate a loader.
The quickest way I found was using .babelrc file and babel-plugin-inline-react-svg.
It worked! well kind of.. Some graphics were not displayed and some did, while others were cut off unexpectedly.

I dug a bit more and found this answer by @felixmosh on stackoverflow using next.config.js file.

TL;DR:

~ Step One:

$ npm install --save-dev @svgr/webpack

~ Step Two:

// next.config.jsmodule.exports = {  webpack(config) {    config.module.rules.push({      test: /\.svg$/,      issuer: {        test: /\.(js|ts)x?$/,       // for webpack 5 use       // { and: [/\.(js|ts)x?$/] }      },      use: ['@svgr/webpack'],    });    return config;  },};

If you used the above solution make sure to give the question and the answer a vote up on stackoverflow

Side note, if youre using typescript in your project and feel bad that the next.config file is a .js file dont because next does not plan to transpile next.config.js. As you can see in this issue.

I hope it helped, thanks for reading!