Подключение к Next.js
Сохраните границу клиентского компонента и проверьте страницу App Router.
Разместите файлы
Выберите Next.js на странице примера и следуйте INSTALL.ru.md из комплекта. Скопируйте папку целиком, не меняя вложенные пути. Импортируйте SelectedExample.tsx в страницу App Router. Сохраните имеющиеся директивы клиентских компонентов в нём и интерактивных файлах.
Сохраните предсказуемый серверный рендер
Не нужно делать клиентской всю страницу ради примера. Браузерные API должны вызываться в обработчиках или эффектах. Начальное содержимое и настройки на сервере и при первом клиентском рендере должны совпадать.
Обработчики событий определяйте внутри клиентского компонента. Обычную серверную функцию нельзя передавать ему как обработчик нажатия.
Проверьте своё приложение
Запустите команды проверки типов и production-сборки, уже определённые в package.json. Затем откройте страницу напрямую, перейдите на неё с другой страницы и проверьте действие клавиатурой. Проверьте консоль на ошибки гидратации.
Выбор типа проекта и наличие файлов не доказывают совместимость со всеми версиями Next.js. Фактические проверки определяются отчётом примера и сборкой вашего приложения. Не обновляйте зависимости только ради подключения комплекта.