Как переходить по SSR страницам Next.js как в SPA?

Для того чтобы реализовать переход между страницами в Next.js с использованием серверного рендеринга (SSR) так, чтобы это работало аналогично переходам в одностраничном приложении (SPA), следует использовать модуль next/link вместе с компонентом Link.

1. Установите Next.js и создайте новый проект с помощью шаблона:

npx create-next-app my-app

2. Внутри директории вашего проекта откройте файл pages/index.js и редактируйте его следующим образом:

import Link from 'next/link';

export default function Home() {
  return (
    <>
      <h1>Главная страница</h1>
      <Link href="/about">
        <a>О нас</a>
      </Link>
    </>
  );
}

3. Создайте новый файл pages/about.js и добавьте в него следующий код:

export default function About() {
  return (
    <>
      <h1>Страница О нас</h1>
    </>
  );
}

4. Теперь, если вы запустите свой проект (npm run dev), вы сможете увидеть ссылку "О нас" на главной странице. При клике на нее, страница будет перенаправлена на страницу /about, и контент этой страницы будет отображен без перезагрузки страницы.

Вот как это работает:

- Модуль next/link предоставляет компонент Link, который используется для создания ссылок в Next.js приложении.
- Когда вы используете компонент Link, он генерирует небольшой фрагмент HTML с <a> тегом, который выполняет роль ссылки.
- По умолчанию, когда пользователь кликает по ссылке, Next.js переходит на указанный маршрут, используя серверный рендеринг.
- При SSR, Next.js просто проксирует этот переход на сервер и отображает соответствующую страницу без полной перезагрузки.
- Это позволяет достичь переходов между страницами, которые похожи на переходы в SPA, изменяя только необходимый контент на странице.

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