Для обновления состояния компонента в Next.js в ответ на событие, вы можете использовать локальный state компонента или передать функцию обновления состояния в дочерний компонент через props.
Для автоматического обновления данных о количестве товаров в корзине без перезагрузки страницы вы можете использовать глобальные переменные или куки для хранения информации о количестве товаров. После добавления товара через карточку товара, вы можете обновить эту информацию и перерисовать шапку страницы с новым количеством товаров.
Например, при добавлении товара вы можете использовать JavaScript для отправки запроса на сервер, который обновит информацию о количестве товаров в корзине. После этого вы можете обновить шапку страницы посредством JavaScript, чтобы отобразить новое количество товаров.
Надеюсь, это поможет вам решить вашу проблему! Если у вас есть другие вопросы, не стесняйтесь задавать.