Как в Next.js сделать ссылку активной и прокручивать ее до определенного раздела на той же странице, используя идентифик ⇐ CSS

[Anonymous]

Я хочу реализовать в Next.js функциональность, при которой:
Когда пользователь нажимает на ссылку, он прокручивается до определенного раздела на той же странице.
ссылка становится активной (например, меняет цвет, получает подчеркивание и т. д.) при нажатии и прокрутке до соответствующего раздела.
Прокрутка осуществляется с использованием идентификатора, что означает, что ссылка имеет атрибут href с идентификатором ссылки. раздел, до которого он должен прокрутиться.
Это мой код

Код: Выделить всё

[list] {
navLinks.map((link, index) => {
return (
[*]

{
link.name
}


);
})
} [/list]

Ожидаемое поведение:
Когда пользователь нажимает на ссылку с атрибутом href, содержащим идентификатор (например, #section1), страница должна прокручиваться. к элементу с соответствующим идентификатором (например, ).
Ссылка, по которой был сделан щелчок, должна стать активной, чего можно добиться, добавив класс CSS к элементу ссылки или каким-либо образом изменив его стили.

Подробнее здесь: https://stackoverflow.com/questions/790 ... ion-on-the