Summary

The website content provides guidance on importing SVG files into a NextJS project, outlining five different methods.

Abstract

The article "How To Import SVGs into NextJS" discusses the common issue developers face when trying to import SVG files into their NextJS projects, specifically a cryptic error message related to webpack not having an appropriate loader. It offers five solutions: using SVGR to import SVGs as React components, employing the babel-plugin-inline-react-svg for Babel users, utilizing the next-images plugin for various image types, simply using an image tag to reference SVGs placed in the public folder, and manually copying and pasting SVG code into a React component file. The article also addresses a TypeScript-specific error and provides a fix for it. Each method includes code examples and references to official NextJS documentation for further customization.

Opinions

The author suggests that using SVGR is a preferred method for importing SVGs as React components in NextJS, especially for those familiar with Create-React-App.
For developers who prefer Babel over webpack, the article recommends babel-plugin-inline-react-svg as a suitable alternative.
The next-images plugin is presented as a versatile option for importing various image types, but the author notes it should be customized to exclude SVG directories if SVGs are to be used as React components.
The article implies that using a plain image tag is the simplest method for including SVGs in a NextJS project, bypassing the need for import statements.
Copying and pasting SVG code directly into a component file is suggested for those who want to avoid additional dependencies, indicating a preference for simplicity in some cases.
The author acknowledges the challenges TypeScript users may face and provides a specific solution to address module resolution errors when importing SVGs.
The article concludes by encouraging readers to try an AI service, ZAI.chat, as a cost-effective alternative to ChatGPT Plus (GPT-4), suggesting the author's endorsement of the service for similar performance and functions.

How To Import SVGs into NextJS

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

Then we can import our SVG file as normal, and use it like any other React component.

2. Use babel-plugin-react-svg

If you prefer to use a babel plugin instead of a webpack loader, you can use babel-plugin-inline-react-svg to import SVGs as React components.

Start by installing the dependency, and then create a .babelrc in the root of your project with the following contents.

For more information on using custom Babel configurations with NextJS, check out the official documentation.

3. Use next-images

next-images is a plugin that allows you to import all kinds of images into your NextJS application. By default, it allows you to import jpg, jpeg, png, svg, fig, ico, webp, and jp2 images.

To use next-images, start by installing the dependency and then create a next.config.js file.

If you use next-images to import your SVG files, you will need to use them as plain images. If you prefer to import SVGs as React components, and you still want to use next-images to import other images, then you should customize your configuration to omit the directory where you keep your SVGs and use either SVGR or babel-plugin-react-svg for your SVG files.

4. Use a plain image tag

If you want to keep it simple, you can always use your SVGs with plain image tags, and avoid importing them together. To do this, simply place your SVG images in the public folder, and then reference them from your React components like this.

<img src='/dog.svg' alt='next' />

For more information on static file serving and the public directory in NextJS, check out the official documentation.

5. Copy and paste the SVG

Let’s say you have the following SVG of a circle.

Simply create a file called Circle.js, and copy the contents of your SVG into it. But first, make sure you convert the HTML to JSX markup. You can use this handy tool.

Now you can use Circle as you would any other React component in your application, without installing any extra dependencies.

TypeScript

TypeScript users may see the following error when they try to import SVGs into their application

Cannot find module './Dog.svg' or it's corresponding type definitions.

In order to resolve this error, start by creating a folder called @types in the root of your project. Then create a file called index.d.ts with the following.

This should resolve your errors and allow your project to compile.

That’s it for today! I hope this helped you better understand the different ways to configure your NextJS application to work with SVG files.