Встроенные функции (навигация, ссылка, разделение кода и предварительная выборка)

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

Навигация между страницами

Здесь вы видите одну из самых простых, но полезных функций Next.js. Но вы не удивитесь, увидев это, потому что это то, что я показал вам в предыдущем посте, связанном с Next.js, здесь у вас есть это, если вы еще не видели 👏👉👉Упрощенный Next.js, современный React. js-фреймворк №1

То, о чем я говорю, — это просто структура файлов, которые помещаются в папку Pages/ и используются вместо библиотеки react-router-dom для навигации по пользовательским представлениям вашего веб-приложения.

Вот оно 👇🙌:

структура файлов

  • Pages/index.js → (это файл, который представляет вашу домашнюю страницу («/», в адресной строке вашего браузера) и создается Nex.js по умолчанию)
  • Pages/products.js → (это обычный вид, представляющий («/products», в адресной строке вашего браузера))
  • Pages/about.js → (это обычное представление, представляющее («/about», в адресной строке вашего браузера))
  • Pages/contact.js → (это обычное представление, представляющее («/contacts», в адресной строке вашего браузера))

Когда вы создали эти компоненты (about.js, contact.js), вам автоматически доступно то же имя файла, что и ваши маршруты, и вы можете использовать их прямо на своей странице следующим образом: 👇

Компонент ссылки

Если вы ранее использовали React.js, это будет вам очень знакомо, в конце концов, это компонент, который заставляет React.js нормально вести себя как SPA-приложение, и в Next.js функциональность также не работает по-другому. Уникальная разница между ними заключается в том, что в React вы обычно устанавливаете react-router-dom из npm, а в Next.js это уже идет с ним.

import Link from 'next/link'

И вы используете это так:

<Link href="/about">
    <a>about page</a>
  </Link>

Важно отметить, что HTML-тег привязки 👉👉<a></a>👈👈 используется в компоненте Link для корректной работы в качестве SPA.

Разделение кода и предварительная выборка

Если вы знаете отложенную загрузку React.js, это означает, что Next.js автоматически выполняет процесс отложенной загрузки, и вам не нужно об этом заботиться. и если вы спросите, как вы контролируете, когда код загружается, когда это необходимо, позвольте мне сказать вам, что снова Next.js позаботится об этом, используя функцию предварительной выборки, которая автоматически определяет, когда <Link> находится в окне просмотра, и готовится к загрузить компонент, который запрашивает пользователь.

Если вы не знаете, что такое ленивая загрузка React, то позвольте мне быстро объяснить вам. Ленивая загрузка — это метод оптимизации вашего кода путем разделения кода на небольшие фрагменты информации, которые не загружаются автоматически после первого рендеринга страницы в браузере, избегая ненужной загрузки кода в клиенте и, что наиболее важно, избегая чрезмерного времени загрузки для пользователей.

Это на сегодня. Не забудьте, если вы хотите помочь мне сделать это через👌🧐

☕КупиКофе.☕