Связывание страниц

Часть раздела Основы Next.js путешествия по React на Coddy — урок 7 из 47.

Две страницы, на которые никто не может перейти, — это ещё не сайт. Вам нужны ссылки, и в Next.js есть свой собственный компонент для них:

import Link from 'next/link';

export default function Home() {
    return (
        <nav>
            <Link href="/about">About</Link>
        </nav>
    );
}

Это выглядит как <a>, и в готовом HTML этим и является: тот же href, поддерживается клик правой кнопкой мыши, считывается скринридерами и поисковыми системами. Так почему бы просто не написать <a href="/about">?

Всё дело в том, как браузер обрабатывает обычный link: он выгружает текущую страницу и загружает абсолютно новую. Каждый скрипт скачивается заново, React перезапускается с нуля, и всё из памяти исчезает: открытое меню, наполовину заполненная форма, товары в корзине.

Link перехватывает клик и заменяет только ту часть экрана, которая на самом деле отличается. Приложение никогда не перезапускается, поэтому состояние сохраняется, а новая страница появляется мгновенно.

<a href>: полная перезагрузка, приложение перезапускается, состояние теряется
<Link href>: тот же URL, тот же <a> в HTML, без перезагрузки

Правило простое: внутри вашего приложения всегда используйте Link. Оставьте обычный <a> для ссылок, ведущих за пределы вашего сайта.

Задание

Легко

Две страницы существуют, но между ними нет возможности переходить. Свяжите их с помощью Link.

В обоих файлах импортируйте Link из next/link.
В app/page.jsx добавьте ссылку на /about с id="to-about".
В app/about/page.jsx добавьте ссылку обратно на / с id="to-home".

Текст ссылки остаётся на ваше усмотрение. Тесты нажмут на каждую ссылку и проверят, что вы попали на нужную страницу.

Попробуйте сами

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}