Чтобы перейти на другую страницу в Next.js при возникновении события щелчка, вы можете использовать несколько методов. Вот некоторые из распространенных подходов:

1. Компонент Link: Next.js предоставляет встроенный компонент Link, который можно импортировать из пакета next/link. Вы можете обернуть кликабельный элемент компонентом Linkи указать маршрут назначения с помощью атрибута href. Этот метод рекомендуется для внутренней навигации в приложении Next.js.

import Link from 'next/link';
const MyComponent = () => (
  <Link href="/another-page">
    <a>Go to Another Page</a>
  </Link>
);

2. Объект Router: Next.js также предоставляет объект Router, который можно импортировать из пакета next/router. Вы можете использовать метод pushобъекта Routerдля программного перехода на другую страницу при возникновении события щелчка.

import { useRouter } from 'next/router';
const MyComponent = () => {
  const router = useRouter();
  const handleClick = () => {
    router.push('/another-page');
  };
  return <button onClick={handleClick}>Go to Another Page</button>;
};

3. Перехватчик Router: Next.js поддерживает перехватчик useRouter, который можно импортировать из пакета next/router. Вы можете использовать этот крючок для доступа к объекту маршрутизатора и перехода на другую страницу.

import { useRouter } from 'next/router';
const MyComponent = () => {
  const router = useRouter();
  const handleClick = () => {
    router.push('/another-page');
  };
  return <button onClick={handleClick}>Go to Another Page</button>;
};

Это всего лишь несколько способов перехода на другую страницу в Next.js при возникновении события щелчка. Вы можете выбрать метод, который лучше всего соответствует потребностям вашего приложения.