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 type

In 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.

How to import SVGs into your NextJS application

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.

#typescript #webpack #nextjs #javascript #svg