Five different ways to do it
Have you ever tried to import an SVG into your NextJS project, and ran into the following cryptic error?
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file typeIn this error, webpack is telling us that it doesn’t have a loader set up to handle this particular file type (.svg files). Remember that with webpack, we need loaders to preprocess any files that aren’t JavaScript. These loaders help us to import CSS files, images, videos, and in our case, SVG files.
1. Use SVGR
SVGR is a tool that allows us to import SVGs into your React applications as React components. If you have used Create-React-App in the past, you might be familiar with this, as it comes built-in.
To use SVGR with our project, we need to first install the dependency @svgr/webpack, and then modify our next.config.js file as follows. For more information about customizing your webpack configuration, check out the official documentation.
