Как настроить компонент Next.js в React проекте, чтобы использовать его как логотип?

Для использования SVG как React-компонента в Next.js проекте вам потребуется настроить Next.js, что позволит импортировать SVG файлы как React-компоненты. Для этого выполните следующие шаги:

1. Установите необходимые зависимости:

```bash
npm install --save-dev @svgr/webpack
```

2. Создайте файл `next.config.js` в корневой папке проекта и добавьте в него следующий код:

```javascript
const withSvgr = require("next-svgr");

module.exports = withSvgr();
```

3. Теперь вы можете импортировать SVG файлы в виде React-компонентов в ваш компонент:

```javascript
import { ReactComponent as AudioLogo } from "../../../test.svg";
```

Теперь ваш SVG файл будет импортироваться и использоваться как обычный React-компонент.

Можно использовать онлайн-сервис для преобразования файлов SVG в компоненты React. Вот один из таких сервисов: https://react-svgr.com/playground/. Там же в документации есть инструкции о том, как установить пакет в свой проект, чтобы SVG файлы автоматически конвертировались в компоненты. 

Однако, при таком подходе могут возникнуть проблемы с тестами, если вы установите этот пакет. 

Более рекомендуемый подход - использовать спрайты SVG. Есть специальный инструмент, который поможет вам создать спрайт из ваших SVG файлов: https://svgsprit.es/. Это позволит уменьшить затраты на производительность, а также предоставит более гибкий и масштабируемый подход к отображению SVG.