Чтобы перейти на другую страницу в Next.js при нажатии, вы можете использовать несколько методов:
- Компонент 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>
);
- Объект 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>
);
};
- Навигация на стороне сервера. Если вам необходимо выполнить навигацию на стороне сервера, например, во время отправки формы, вы можете использовать метод
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) перед их использованием.