Для того чтобы реализовать переход между страницами в Next.js с использованием серверного рендеринга (SSR) так, чтобы это работало аналогично переходам в одностраничном приложении (SPA), следует использовать модуль next/link вместе с компонентом Link.
- Установите Next.js и создайте новый проект с помощью шаблона:
npx create-next-app my-app
- Внутри директории вашего проекта откройте файл
pages/index.jsи редактируйте его следующим образом:
import Link from 'next/link';
export default function Home() {
return (
<>
<h1>Главная страница</h1>
<Link href="/about">
<a>О нас</a>
</Link>
</>
);
}
- Создайте новый файл
pages/about.jsи добавьте в него следующий код:
export default function About() {
return (
<>
<h1>Страница О нас</h1>
</>
);
}
- Теперь, если вы запустите свой проект (
npm run dev), вы сможете увидеть ссылку "О нас" на главной странице. При клике на нее, страница будет перенаправлена на страницу/about, и контент этой страницы будет отображен без перезагрузки страницы.
Вот как это работает:
- Модуль
next/linkпредоставляет компонентLink, который используется для создания ссылок в Next.js приложении. - Когда вы используете компонент
Link, он генерирует небольшой фрагмент HTML с<a>тегом, который выполняет роль ссылки. - По умолчанию, когда пользователь кликает по ссылке, Next.js переходит на указанный маршрут, используя серверный рендеринг.
- При SSR, Next.js просто проксирует этот переход на сервер и отображает соответствующую страницу без полной перезагрузки.
- Это позволяет достичь переходов между страницами, которые похожи на переходы в SPA, изменяя только необходимый контент на странице.
Это простой пример того, как реализовать переходы между страницами в Next.js с использованием серверного рендеринга. Конечно, в более сложных приложениях, могут быть требования к передаче данных при переходе, а также к работе с параметрами маршрута и динамическими маршрутами. В таких случаях модуль next/link предоставляет дополнительные возможности для более гибкой настройки.