‌
4 - Хук useSearchParams для чтения query-параметров в Next.js. Создание ссылок в Next.js с помощью Link

Для доступа к видео войдите в систему

4 - Хук useSearchParams для чтения query-параметров в Next.js. Создание ссылок в Next.js с помощью Link

Оценить качество материала и подачу материала автором видео:

Front-end

Трудоустройтесь middle front-end разработчиком на React JS (TypeScript) за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс
Front-end

Back-end

Трудоустройтесь middle back-end разработчиком за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс
Back-end

Карьерный бустер

Получите коммерческий опыт на реальных стартапах, прокачайте tech & soft навыки, научитесь работать в команде, проходить собеседования и получите первую работу в IT!

Перейти на курс
Карьерный бустер

Основы Front-end

Сделайте первый шаг в IT, освоив базовые знания разработки и научившись создавать небольшие проекты на JavaScript

Перейти на курс
Основы Front-end

Основы Back-end

Сделайте первый шаг в IT, освоив базовые знания разработки. Без опыта. Без математики. Только практика: JavaScript, SQL, Node JS, база данных

Перейти на курс
Основы Back-end

useSearchParams для чтения query-параметров в Next.js. Создание ссылок в Next.js с помощью Link

Автор конспекта: Стогниева Виктория

1. Чтение параметров из URL: Хук useSearchParams 🔍

1.1. Что такое Query-параметры? ❓

Query-параметры (или параметры запроса) — это часть URL, которая идет после знака вопроса (?). Они позволяют передавать на страницу небольшие фрагменты данных в формате "ключ=значение".

Рассмотрим на примере:

text
/profile/123?title=test&sort=asc

Здесь title=test и sort=asc — это и есть query-параметры, разделенные амперсандом (&).

1.2. Как получить данные с помощью useSearchParams 🛠️

В Next.js для доступа к этим параметрам используется специальный хук useSearchParams. Процесс очень прост и состоит из трех шагов:

  1. Импортируйте хук из next/navigation.
  2. Вызовите его в вашем компоненте, чтобы получить доступ к объекту с параметрами.
  3. Используйте метод .get() для получения значения нужного параметра, передав в него ключ в виде строки.

Это невероятно полезно для создания динамических страниц, где контент может меняться в зависимости от URL, например, для фильтрации товаров в каталоге (?category=electronics) или отслеживания рекламных кампаний (?utm_source=google).

jsx
"use client"
 
import { useParams, useSearchParams } from "next/navigation"
import styles from "../page.module.css"
 
export default function Home() {
  const params = useParams()
  const searchParams = useSearchParams()
 
  return (
    <div className={styles.page}>
      <main className={styles.main}>
        Profile {params.slug}
        <div>{searchParams.get("title")}</div>
      </main>
    </div>
  )
}

1.3. Дополнительные возможности: Метод .has() ℹ️

💡

На заметку: у объекта searchParams есть и другие полезные методы. Например, метод .has() позволяет проверить, существует ли определенный параметр в URL. Он возвращает true (если параметр есть) или false (если его нет).

jsx
"use client"
 
import { useParams, useSearchParams } from "next/navigation"
import styles from "../page.module.css"
 
export default function Home() {
  const params = useParams()
  const searchParams = useSearchParams()
 
  return (
    <div className={styles.page}>
      <main className={styles.main}>
        Profile {params.slug}
        <div>{searchParams.has("title")}</div>
      </main>
    </div>
  )
}

2. Создание ссылок: Мощь компонента Link 🔗

2.1. Почему не обычный тег a? 🤔

Хотя стандартный HTML-тег <a> будет работать для создания ссылок, Next.js настоятельно рекомендует другой подход для навигации внутри вашего приложения. Если вы используете <a> для внутренних ссылок, вы можете столкнуться с предупреждением в консоли, которое, по сути, говорит: «Не используйте тег <a> для навигации на внутренние страницы (например, на /profile или /about)».

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

2.2. Знакомство с Link: Лучший друг навигации 🚀

Next.js предоставляет специальный, усовершенствованный инструмент для навигации — компонент <Link>. Он импортируется из next/link и используется вместо тега <a>.

Было (стандартный HTML):

header.tsx
"use client"
 
import styles from "./header.module.css"
 
export const Header = () => {
  return (
    <nav className={styles.navigation}>
      <ul>
        <li>
          <a href="/" className={styles.link}>
            Main
          </a>
        </li>
        <li>
          <a href="/profile" className={styles.link}>
            Profile
          </a>
        </li>
        <li>
          <a href="/profile/123" className={styles.link}>
            Profile 123
          </a>
        </li>
      </ul>
    </nav>
  )
}
layout.tsx
import { Header } from '@/widgets/header/header';
import type { Metadata } from 'next';
import { Geist, Geist_Mono } from 'next/font/google';
import './globals.css';
 
const geistSans = Geist({
  variable: '--font-geist-sans',
  subsets: ['latin'],
});
 
const geistMono = Geist_Mono({
  variable: '--font-geist-mono',
  subsets: ['latin'],
});
 
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        <Header />
        {children}
      </body>
    </html>
  );
}
header.module.css
.navigation {
  margin: 0 auto;
  padding: 20px;
  display: flex;
}
 
.navigation ul {
  margin: 0 auto;
  display: flex;
  gap: 50px;
  list-style: none;
}
 
.link {
  color: #4de34f;
}

Стало (рекомендуемый способ в Next.js):

jsx
"use client"
 
import Link from "next/link"
import styles from "./header.module.css"
 
export const Header = () => {
  return (
    <nav className={styles.navigation}>
      <ul>
        <li>
          <Link href="/" className={styles.link}>
            Main
          </Link>
        </li>
        <li>
          <Link href="/profile" className={styles.link}>
            Profile
          </Link>
        </li>
        <li>
          <Link href="/profile/123" className={styles.link}>
            Profile 123
          </Link>
        </li>
      </ul>
    </nav>
  )
}

2.3. Главное преимущество: Магия предзагрузки (Prefetching) ✨

Главный секрет и самое важное преимущество компонента <Link> — это предзагрузка (prefetching). Что это значит?

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

Результат для пользователя просто восхитителен: переходы по сайту ощущаются практически мгновенными.

"хоп кликаю на main опа а она уже загружена"

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

2.4. Сравнительная таблица: <Link> против <a> 📊

Для наглядности сравним оба подхода при создании внутренних ссылок в приложении Next.js.

ХарактеристикаКомпонент <Link>Тег <a>
Рекомендация Next.js✅ Рекомендуется для всех внутренних ссылок.❌ Не рекомендуется для внутренних ссылок.
Производительность🚀 Включает автоматическую предзагрузку (prefetching), делая переходы мгновенными.🐌 Полная перезагрузка страницы при каждом клике. Нет предзагрузки.
Основной сценарий📱 Навигация внутри вашего Next.js-приложения.🌐 Ссылки на внешние сайты (например, https://google.com).

Next.js Базовый Курс

Видеоурок - 6 видео из 16