Компонент Link

При создании ссылок между страницами веб-сайтов обычно используется HTML-тег <a>.

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

Использование <Link>

Сначала откройте файл pages/index.js и импортируйте компонент Link из next/link, добавив эту строку в начало файла:

import Link from 'next/link';

Затем найдите тег h1, который выглядит следующим образом:

<h1 className={styles.title}>
  Learn <a href="https://nextjs.org">Next.js!</a>
</h1>

И измените его на:

<h1 className={styles.title}>
  Читайте <Link href="/posts/first-post">эту страницу!</Link>
</h1>

Далее откройте файл pages/posts/first-post.js и замените его содержимое следующим кодом:

import Link from 'next/link';
 
export default function FirstPost() {
  return (
    <>
      <h1>Первая запись</h1>
      <h2>
        <Link href="/">Вернуться на главную</Link>
      </h2>
    </>
  );
}

Как видите, компонент Link похож на использование тегов <a>, но вместо <a href="…"> вы используете <Link href="…">.

Примечание: До версии Next.js 12.2 требовалось, чтобы компонент Link оборачивал тег <a>, но начиная с версии 12.2 это больше не обязательно.

Давайте проверим, работает ли это. Теперь у вас должна быть ссылка на каждой странице, позволяющая переходить между ними: