Как настроить Next на {ReactComponent as Logo} в React поекте?

Для настройки Next.js на использование компонента React, который импортируется с помощью синтаксиса {ReactComponent as Logo}, необходимо выполнить несколько шагов.

1. Установите Next.js в вашем проекте с помощью npm или yarn. Выполните команду:

npm install next

или

yarn add next

2. Создайте новый файл в корневой папке проекта с названием next.config.js. В этом файле мы определим конфигурацию для Next.js.

3. Внутри next.config.js добавьте следующий код:

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /.svg$/,
      use: ["@svgr/webpack"]
    });

    return config;
  }
};

Этот код добавляет правило, которое позволяет Next.js использовать loader для SVG файлов, который будет преобразовывать компонент React в SVG.

4. Теперь вы можете использовать компонент React с помощью синтаксиса {ReactComponent as Logo}. Здесь есть несколько вариантов использования такого компонента.

• Если вам нужно отобразить компонент только один раз, вы можете просто использовать его в JSX коде:

  import { ReactComponent as Logo } from "./logo.svg";

  const MyComponent = () => {
    return <Logo />;
  }

• Если вам нужно использовать компонент несколько раз, вы можете сохранить его в переменную и использовать эту переменную в JSX коде:

  import { ReactComponent as Logo } from "./logo.svg";

  const MyComponent = () => {
    const MyLogo = <Logo />;

    return (
      <>
        {MyLogo}
        {MyLogo}
      </>
    );
  }

5. Запустите ваш проект Next.js с помощью команды:

npm run dev

или

yarn dev

Теперь вы должны видеть, что ваш компонент React, импортированный с помощью синтаксиса {ReactComponent as Logo}, успешно отображается в вашем проекте Next.js.