Вивчайте Розробка Функціоналу Пошуку | Розширені Можливості Next.js та Оптимізації

Теорія

Перш ніж реалізовувати функціонал пошуку, важливо ознайомитися з цими клієнтськими хуками.

useSearchParams;
- Надає доступ до поточних параметрів URL;
- Приклад: Для URL /dashboard/invoices?page=1&query=pending повертає {page: '1', query: 'pending'}.
usePathname;
- Зчитує поточний шлях URL;
- Приклад: Для маршруту domain/dashboard/invoices, usePathname повертає "/dashboard/invoices".
useRouter.
- Дозволяє навігацію між маршрутами у клієнтських компонентах, пропонуючи декілька методів.

Огляд етапів реалізації:

Отримання введення користувача;
Оновлення URL з параметрами пошуку;
Синхронізація URL з полем введення;
Оновлення таблиці відповідно до пошукового запиту.

Повернення до проєкту

1. Отримання введення користувача

Відкрити компонент Search (app/ui/search.tsx);
Звернути увагу на використання 'use client', що вказує на доступність обробників подій та хуків;
Використати функцію handleSearch, яка викликається при кожній зміні введення.

Після впровадження відкрийте Консоль розробника у вашому браузері. Ви повинні побачити будь-який текст, введений у поле введення, відображений у консолі браузера.

2. Оновлення URL з параметрами пошуку

Імпортувати хук useSearchParams з 'next/navigation' та присвоїти його змінній;
Усередині функції handleSearch створити новий екземпляр URLSearchParams, використовуючи раніше визначену змінну (searchParams). Ця утиліта надає методи для роботи з параметрами запиту в URL;
Встановити рядок параметрів відповідно до введення користувача. Якщо поле порожнє — видалити його;
Використати хуки useRouter та usePathname з 'next/navigation' і застосувати метод replace з useRouter() у межах handleSearch.
- ${pathname} — поточний шлях, наприклад, "/dashboard/invoices";
- Під час введення в пошуковий рядок params.toString() перетворює введене у формат, придатний для URL;
- replace(${pathname}?${params.toString()}) оновлює URL з даними пошуку користувача (наприклад, /dashboard/invoices?query=qwerty).

URL оновлюється без перезавантаження сторінки завдяки клієнтській навігації Next.js.

Після впровадження будь-який текст, введений у поле, буде відображатися в URL.

3. Синхронізація URL з полем введення

Щоб поле введення відповідало URL і автоматично заповнювалося при поширенні посилання, використовуйте defaultValue, зчитуючи значення з searchParams.

4. Оновлення таблиці відповідно до пошукового запиту

Нарешті, оновіть компонент Table, щоб він відображав результати пошуку. Компоненти сторінок приймають проп під назвою searchParams. Передайте поточні параметри URL до компонента <Table>.

Не забудьте розкоментувати компонент Table.

Чудово! Ви успішно додали функціонал пошуку до свого застосунку. Спробуйте — чи працює він? 😊

У наступному розділі розглянемо пагінацію, оскільки наразі на сторінці відображається лише 6 рахунків.

На практиці

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 6. Розділ 2

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain how the useSearchParams hook works in more detail?

How does the Table component use the query and currentPage props to filter data?

What should I do if the search input and URL are not staying in sync?

Свайпніть щоб показати меню