Переход на другую страницу в Next.js при нажатии

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

  1. Компонент Link: Next.js предоставляет встроенный компонент Link, который можно импортировать из пакета next/link. Вы можете обернуть кликабельный элемент (например, кнопку или тег привязки) компонентом Linkи указать целевую страницу с помощью свойства href. Вот пример:
import Link from 'next/link';
const MyComponent = () => (
  <Link href="/another-page">
    <a>Go to Another Page</a>
  </Link>
);
  1. Объект 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>
  );
};
  1. Навигация на стороне сервера. Если вам необходимо выполнить навигацию на стороне сервера, например, во время отправки формы, вы можете использовать метод pushобъекта Routerс >каквариант. Это позволяет вам указать URL-адрес на стороне сервера. Вот пример:
import { useRouter } from 'next/router';
const MyComponent = () => {
  const router = useRouter();
  const handleSubmit = async (event) => {
    event.preventDefault();
    await router.push('/another-page', '/another-page', { shallow: true });
  };
  return (
    <form onSubmit={handleSubmit}>
      {/* form fields */}
      <button type="submit">Submit</button>
    </form>
  );
};

Это несколько методов, которые можно использовать для перехода на другую страницу в Next.js при нажатии. Не забудьте импортировать необходимые пакеты (next/linkили next/router) перед их использованием.