Как подключить Yandex Maps JS API 3 к Next.js 13?

Для подключения Yandex Maps JS API 3 к Next.js 13 вам потребуется выполнить несколько шагов:

1. Установите пакеты, необходимые для работы с Yandex Maps API:

npm install --save yandex-maps

2. Создайте компонент, который будет использовать карту. Для примера, создадим компонент с именем "YandexMap":

import { useEffect, useRef } from 'react';
import { YMaps, Map, Placemark } from 'react-yandex-maps';

const YandexMap = () => {
  const mapRef = useRef(null);

  useEffect(() => {
    if (mapRef.current) {
      // Инициализация карты
      const ymapsInstance = mapRef.current.ymaps;
      ymapsInstance.ready(() => {
        // Ваш код для работы с картой
      });
    }
  }, []);

  return (
    <YMaps query={{ load: 'package.full' }}>
      <div ref={mapRef} style={{ width: '100%', height: '400px' }}>
        <Map defaultState={{ center: [55.75, 37.57], zoom: 10 }} />
      </div>
    </YMaps>
  );
};

export default YandexMap;

3. В компоненте, где вы хотите использовать карту, импортируйте компонент "YandexMap" и добавьте его на страницу:

import YandexMap from './YandexMap';

const MyPage = () => (
  <div>
    <h1>Моя страница</h1>
    <YandexMap />
  </div>
);

export default MyPage;

4. Важная часть - сконфигурируйте webpack конфигурацию Next.js для правильной работы со статическим импортом пакета "yandex-maps". Создайте файл "next.config.js" в корне вашего проекта и добавьте в него следующий код:

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // Убедитесь, что next-i18next не будет пытаться загружать модуль яндекс-карт
      config.externals.push('yandex-maps');
    }

    return config;
  },
};

5. Настройте ваш API-ключ для Yandex Maps API. Вам потребуется зарегистрироваться на сайте Yandex и создать новое приложение, чтобы получить API-ключ. Затем, создайте файл ".env.local" в корне вашего проекта и добавьте в него следующий код:

NEXT_PUBLIC_YANDEX_MAPS_API_KEY=YOUR_API_KEY

6. Теперь вы можете использовать Yandex Maps API в вашем компоненте "YandexMap". Например, вы можете добавить метки на карту:

// ...

useEffect(() => {
  if (mapRef.current) {
    const ymapsInstance = mapRef.current.ymaps;
    ymapsInstance.ready(() => {
      // Получаем ссылку на карту
      const map = ymapsInstance.getMap();
      
      // Создаем метку
      const placemark = new ymapsInstance.Placemark([55.75, 37.57], {
        hintContent: 'Москва!',
        balloonContent: 'Столица России',
      });
      
      // Добавляем метку на карту
      map.geoObjects.add(placemark);
    });
  }
}, []);

// ...

Это основные шаги для подключения Yandex Maps JS API 3 к Next.js 13. Обратите внимание, что вам может потребоваться настроить дополнительные опции, в зависимости от вашей конкретной ситуации использования.