Если вы когда-нибудь пытались импортировать SVG файл в свой проект NextJS вы наверняка сталкивались со следующей ошибкой.

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type

В этой ошибке webpack сообщает нам, что у него нет настроенного загрузчика, для обработки этого конкретного типа файлов. (.svg). Помните, что с webpack нам нужны loaders для предварительной обработки любых файлов, не относящихся к JavaScript. Эти загрузчики помогают нам импортировать файлы CSS, изображения, видео и, в нашем случае, файлы SVG.

Как импортировать SVG в ваше NextJS приложение

1. SVGR

SVGR это инструмент, который позволяет нам импортировать SVG-файлы в ваши приложения React как компоненты React. Если вы раньше использовали create-react-app, возможно, вы уже знакомы с этим, поскольку оно встроено.

Чтобы использовать SVGR в нашем проекте, нам нужно сначала установить зависимость @svgr/webpack, а затем внести изменения наш next.config.js файл следующим образом. Для получения дополнительной информации о настройке конфигурации webpack ознакомьтесь с официальной документацией.

2. babel-plugin-react-svg

Если вы предпочитаете использовать плагин babel вместо webpack, вы можете использовать babel-plugin-inline-react-svg для импорта SVG файла как компонента React.

Начните с установки зависимости, а затем создайте .babelrc в корне вашего проекта со следующим содержимым.

{
  "presets": ["next/babel"],
  "plugins": ["inline-react-svg"]
}

Дополнительную информацию о пользовательской конфигурации Babel с NextJS можно найти на сайте с официальной документацией.

3. next-images

next-images это плагин, который позволяет вам импортировать все типы изображений в ваше приложение NextJS. По умолчанию он позволяет импортировать изображения jpg, jpeg, png, svg, fig, ico, webp, иjp2.

Использовать next-images, начните с установки пакета, а затем создайте файл next.config.js.

Если вы используете next-images для импорта ваших файлов SVG, вам нужно будет использовать их как простые изображения. Если вы предпочитаете импортировать SVG как компоненты React, но по-прежнему хотите использовать next-images чтобы импортировать другие изображения, вы должны настроить свою конфигурацию, чтобы исключить каталог, в котором вы храните свои SVG-файлы, и использовать или SVGR или babel-plugin-react-svg для ваших файлов SVG.

4. Простой тег изображения

Если вы хотите, чтобы все было просто, вы всегда можете использовать свои SVG-файлы с простыми тегами изображений и не импортировать их вместе. Для этого просто поместите свои изображения SVG в public папку, а затем ссылайтесь на них из своих компонентов React.

<img src='/twitter.svg' alt='twitter logo' />

Для получения дополнительной информации о загрузке статических файлов с директории public ознакомьтесь с официальной документацией NextJS.

5. Скопируйте и вставьте SVG

Допустим, у вас есть следующий SVG-файл круга.

Просто создайте файл с именем Circle.js, и скопируйте в него содержимое вашего SVG. Но сначала убедитесь, что вы преобразовали HTML в разметку JSX. Вы можете использовать этот удобный инструмент.

Теперь вы можете использовать Circle, как любой другой компонент React в своем приложении, без установки каких-либо дополнительных зависимостей.

TypeScript

Пользователи TypeScript могут увидеть следующую ошибку при попытке импортировать SVG в свое приложение.

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

Чтобы устранить эту ошибку, начните с создания папки с именем @types в корне вашего проекта. Затем создайте файл с именем index.d.ts со следующими кодом.

declare module "*.svg" {
  const content: any;
  export default content;
}

Это должно устранить ваши ошибки и позволить вашему проекту скомпилировать приложение.