Введение

Если вы создавали веб-сайты и приложения в Интернете, то, скорее всего, вы использовали обычный метод навигации. Традиционно навигация часто достигается с помощью элемента привязки HTML (<a></a>). Элемент привязки в основном используется для навигации внутри и вне веб-сайтов и веб-страниц, и он довольно хорошо выполняет свою задачу.

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

Шаги, которые мы рассмотрим:


Предпосылки

Чтобы понять эту статью, вам понадобятся хорошие навыки написания и понимания кода на JavaScript и React.

  • Для начала вам также понадобится проект next.js. Посещать здесь чтобы узнать, как создать приложение next.js.
  • Далее запустите npm install styled-components в терминале для установки styled-components. Мы будем использовать его для стиля в этом уроке.


Представляем <Link/> составная часть

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

Кроме того, навигация на стороне клиента с помощью компонента Link не требует полной перезагрузки страницы, что очень важно для производительности приложения и взаимодействия с пользователем.

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

import Link from 'next/link'

function Home () {
    return (
        <>
            <h1> Visit our About page</>
            <Link href="https://dev.to/about"> About Us </Link>
        </>
    )
}

export default Home
Войти в полноэкранный режим

Выйти из полноэкранного режима


Реквизит компонента Link



Требуемый реквизит



href

Ссылка Next.js компонент требует одного обязательного реквизита: href.

href указывает путь или URL-адрес для перехода. Это может быть абсолютный URL-адрес, относительный URL-адрес или объект URL-адреса.

Абсолютный URL

<Link href="https://nextjs.org/docs"> Read the Docs </Link>
Войти в полноэкранный режим

Выйти из полноэкранного режима

Относительный URL

<Link href="/about"> About Us </Link>
Войти в полноэкранный режим

Выйти из полноэкранного режима

URL-объекты

С объектом URL мы можем разрешать URL-адреса, используя строки и параметры, переданные как объект в Ссылка Next.js составная часть. Вот демонстрация, показывающая, как использовать его в компоненте Link.

<Link
    href={{
      pathname: '/products',
      query: { product: '1' },
    }}
>
    <a>Search for product 1</a>
</Link>

Войти в полноэкранный режим

Выйти из полноэкранного режима

Приведенный выше пример решит проблему href значение в: /products/?product=1.



Дополнительные реквизиты



as

as опора используется с href при использовании динамических маршрутов. Он указывает декоратор ссылок, который предоставляет дополнительную информацию об URL-адресе, которую можно использовать в аналитике (например, в рекламе и партнерских программах) и отслеживании производительности веб-страницы.

Обычно декоратор появляется после '?' в URL-адресе веб-страницы и не меняет назначение URL-адреса. Пример URL-адреса с оформлением ссылки: 'http://www.refine.com/blog/article?referrer_source=newsletter'.

Пример

Создавайте новые папки и файлы в pages папка вашего приложения, чтобы выглядеть как показано ниже:

📦pages
 ┣ 📂api
 ┃ ┗ 📜hello.js
 ┣ 📂products
 ┃ ┣ 📜index.js
 ┃ ┗ 📜[product].js
 ┣ 📜index.js
 ┗ 📜_app.
Войти в полноэкранный режим

Выйти из полноэкранного режима

Затем добавьте следующий код в pages/products/index.js:

import React from "react";
import Link from "next/link";

const ProductsList = () => {
  const productIDs = ["1", "2", "3"];
  return (
    <>
      <div>
        <h1>Products List</h1>
      </div>

      {productIDs.map((product, key) => (
        <Link
          href="https://dev.to/products/[product]"
          as={`products/${product}/?referrer_source=newsletter`}
          key={key}
        >
          <a>
            <h1>{product}</h1>
            <p>Learn more about product {product}</p>
          </a>
        </Link>
      ))}
    </>
  );
};

export default ProductsList;
Войти в полноэкранный режим

Выйти из полноэкранного режима

И в pages/products/[product].jsдобавьте следующий код:

import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'

const Product = () => {
    const router = useRouter();
    const productID = router.query.product;
    return (
        <>
            <h1>
            <Link href='/products'><a>Go back to Products</a></Link>
            </h1>
            <div>
                <h5>Product {productID} Details Page</h5>
            </div>
            </>
  )
}

export default Product
Войти в полноэкранный режим

Выйти из полноэкранного режима

Если вы перейдете к localhost:3000/products вы должны увидеть страницу, отображаемую следующим образом:

Описание продукта

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

пример описания

В приведенной выше демонстрации мы видим, что URL-адрес каждого продукта содержит декоратор ссылок, ?referrer_source=newsletterчто не влияет на назначение ссылки.



passHref

passHref опора заставляет Ссылка Next.js компонент для отправки href опора для своего ребенка. Это важно, когда ребенок </Link> — это настраиваемый компонент, который оборачивает тег привязки (<a>).

Не добавляя passHref prop в этом сценарии повредит SEO и доступности, потому что <a> тег не будет иметь href имущество. По умолчанию он отключен.

Пример

Отредактируйте код в pages/products/index.js к следующему:

  import React from "react";
  import Link from "next/link";
+ import styled from 'styled-components'


+ const CustomLink = styled.a`
+ color: red;
+ font-size: 30px;
+ `

const ProductsList = () => {
  const productIDs = ["1", "2", "3"];
  return (
    <>
      <div>
+        <NavLink href=" name="Home"/>
        <h1>Products List</h1>
      </div>

      {productIDs.map((product, key) => (
        <Link
          href="https://dev.to/products/[product]"
          as={`products/${product}/?referrer_source=newsletter`}
          key={key}
        >
          <a>
            <h1>{product}</h1>
            <p>Learn more about product {product}</p>
          </a>
        </Link>
      ))}
    </>
  );
};

+ const NavLink = ({ href, name }) => {
+  return (
+    <Link href={href} passHref>
+      <CustomLink>{name}</CustomLink>
+    </Link>
+ )
+ };

export default ProductsList;
Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь, если вы перейдете к localhost:8000 пользовательская красная ссылка должна отображаться, как показано ниже:

Пользовательское описание



prefetch

Предварительная загрузка содержимого страницы может значительно повысить производительность приложения. prefetch prop разрешает предварительную загрузку страниц в фоновом режиме и включен по умолчанию в компоненте Next.js Link. Он работает только в производственной среде, и если вы хотите отключить предварительную загрузку, вы можете настроить его следующим образом:

<Link href='/products' prefetch={false}><a>Click me!</a></Link>
Войти в полноэкранный режим

Выйти из полноэкранного режима


баннер поддержки github



replace

Свойство replace изменяет способ работы навигации, заменяя текущее состояние истории вместо добавления нового URL-адреса в стек. Это можно продемонстрировать, нажав на кнопку back кнопка на панели навигации в браузере.

Отредактируйте содержимое в pages/index.js к следующему:

import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Introduction to next/link</h1>
        <h1>
          <Link href='/products'>Go to products page</Link>
        </h1>
      </main>
    </div>
  );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Страница должна выглядеть следующим образом:

Описание дома

Если вы нажмете на Go to products page ссылка, посмотрите, как работает навигация по приложению, когда мы нажимаем на кнопку навигации назад без кнопки replace опора в GIF ниже.

изображение

Затем найдите часть, которая содержит приведенный ниже код в pages/products/index.js и добавьте replace поддержите его так:

... 

{productIDs.map((product, key) => (
        <Link
          href="https://dev.to/products/[product]"
          as={`products/${product}/?referrer_source=newsletter`}
          key={key}
+          replace={product === '3' ? true : false}
        >
          <a>
            <h1>{product}</h1>
            <p>Learn more about product {product}</p>
          </a>
        </Link>
      ))}
 ...
Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь вернемся в браузер и посмотрим, как работает навигация с replace опора

Замена изображения

Как вы можете видеть на GIF выше, когда мы посетили страницу сведений о продукте 3, а затем нажали кнопку навигации назад, вместо возврата на страницу продуктов мы были перенаправлены на домашнюю страницу.



scroll

Щелчок по ссылке с помощью компонента «Ссылка» по умолчанию прокручивает страницу назначения вверх. Также можно перейти к определенному разделу новой страницы, используя хэш-идентификаторы (часть URL-адреса после #). Вы можете отключить поведение по умолчанию или хэш-идентификаторы, установив scroll={false} в компоненте «Ссылка».


Отключить прокрутку вверх

<Link href="/blog/intro" scroll={false}>
  <a>Disables scrolling to the top</a>
</Link>
Войти в полноэкранный режим

Выйти из полноэкранного режима


Прокрутите до определенного раздела на веб-странице, используя хэш-идентификаторы.

<Link href="https://refine.dev/blog/mui-datagrid-refine/#material-ui-datagrid-component">
  <a>Scroll to a specific section</a>
</Link>
Войти в полноэкранный режим

Выйти из полноэкранного режима



locale

locale prop используется для перехода пользователей к различным версиям веб-страницы в зависимости от предпочитаемого пользователем языка (языка и региона). Например, у нас может быть блог, который читают пользователи на английском и французском языках, и нам нужно отображать содержимое блога на английском языке для англоязычных пользователей и на французском языке для французских пользователей.

Мы можем предоставить англоязычным или французским пользователям разные версии нашей веб-страницы на их предпочтительном языке, настроив i18n объект в next.config.js. Подробнее о настройке локалей здесь.



shallow

shallow props позволяет нам обновить путь к текущей странице без запуска каких-либо методов выборки данных Next.js (то есть, getStaticProps, getServerSideProps или же getInitialProps). Обновленный pathname а также query связанный с новым URL-адресом, может быть доступен router объект, предоставленный useRouter или же с маршрутизатором.

Вот хороший пример, показывающий, как использовать неглубокую маршрутизацию на ваших веб-страницах.


Вывод

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

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

** Сценарист: Майкл Хунгбо**


баннер раздора



Создавайте свои CRUD-приложения на основе React без ограничений

Современные CRUD-приложения должны использовать данные из множества различных источников, от пользовательских API до серверных служб, таких как Supabase, Hasura, Airtable и Strapi.

Проверить уточнитьесли вы заинтересованы в независимой от бэкэнда безголовой среде, которая может подключать более 15 источников данных благодаря встроенным провайдерам и плагинам сообщества.


улучшить логотип блога

уточнить это фреймворк на основе React с открытым исходным кодом для создания CRUD-приложений. без ограничений.
Это может ускорить время разработки до 3X без ущерба для свободы стиль, настройка а также рабочий процесс проекта.

уточнить безголовый по дизайну, и он соединяет 30+ встроенные серверные службы, включая настраиваемые API REST и GraphQL.

Посещать уточнить репозиторий GitHub для получения дополнительной информации, демонстраций, учебных пособий и примеров проектов.