• invoices 페이지를 기반으로 search와 pagination을 구현하는 방법을 알아볼 것이다.
• In this chapter... Here are the topics we’ll cover
  • Learn how to use the Next.js APIs: searchParams, usePathname, and useRouter. (From ‘next/navigation’)
  • Implement search and pagination using URL search params.

Starting code

• /dashboard/invoices/page.tsx 파일에 아래와 같은 코드를 추가하자.

  import Pagination from '@/app/ui/invoices/pagination';
  import Search from '@/app/ui/search';
  import Table from '@/app/ui/invoices/table';
  import { CreateInvoice } from '@/app/ui/invoices/buttons';
  import { lusitana } from '@/app/ui/fonts';
  import { InvoicesTableSkeleton } from '@/app/ui/skeletons';
  import { Suspense } from 'react';
   
  export default async function Page() {
    return (
      <div className="w-full">
        <div className="flex w-full items-center justify-between">
          <h1 className={`${lusitana.className} text-2xl`}>Invoices</h1>
        </div>
        <div className="mt-4 flex items-center justify-between gap-2 md:mt-8">
          <Search placeholder="Search invoices..." />
          <CreateInvoice />
        </div>
        {/*  <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
          <Table query={query} currentPage={currentPage} />
        </Suspense> */}
        <div className="mt-5 flex w-full justify-center">
          {/* <Pagination totalPages={totalPages} /> */}
        </div>
      </div>
    );
  }
  

  • <Search /> 는 유저가 특정 invoice를 검색할 수 있도록 해준다.
  • <Pagination />은 유저가 invoices의 페이지를 이동(navigate)할 수 있게 해준다.
  • <Table />은 invoices를 display한다.

• Search 기능은 client와 server를 둘다 포함한다.

  1. 유저가 client에서 invoice를 검색하면, URL params가 업데이트 될 것이고,
  2. 그러면 서버에서 data fetching이 일어나고,
  3. 최종적으로 새 데이터와 함께 table이 re-render될 것이다.

Why use URL search params?

• 앞서 언급한대로, URL search params를 이용하여 search state를 관리해볼 것이다. URL params로 search검색을 구현하는 것은 몇가지 이점이 있다:
  • Bookmarkable and Shareable URLs: Since the search parameters are in the URL, users can bookmark the current state of the application, including their search queries and filters, for future reference or sharing.
  • Server-Side Rendering and Initial Load: URL parameters can be directly consumed on the server to render the initial state, making it easier to handle server rendering.
  • Analytics and Tracking: Having search queries and filters directly in the URL makes it easier to track user behavior without requiring additional client-side logic.

Adding the search functionality

• 아래는 search 기능을 구현하기 위해 사용할 Next.js 클라이언트 훅들이다.
  • useSearchParams - 현재 URL의 parameter에 접근할 수 있도록 해준다.
    • 예를들어 /dashboard/invoices?page=1&query=pending URL의 search params는 다음과 같다: {page: '1', query: 'pending'}
  • usePathname - 현재 URL의 pathname을 읽어온다.
    • 예를들어 /dashboard/invoices route에 접속하면 usePathname은 ‘/dashboard/invoices’ 를 리턴할 것이다.
  • useRouter - 클라이언트 컴포넌트 내부에서 프로그래밍적으로(programmatically) routes 간의 navigation을 하게 해준다. 사용할 수 있는 여러 종류의 method들이 있다.
• 전체 구현 단계를 살펴보면 다음과 같다.
  1. Captuer the user’s input
  2. Update the URL with the search params
  3. Keep the URL in sync with the input field
  4. Update the table to reflect the search query

1. Capture the user’s input

• <Search> 컴포넌트 파일(/app/ui/search.tsx)에 들어가보면, 몇가지 눈치챌 수 있을 것이다:

  • “use client” - 클라이언트 컴포넌트임을 나타낸다. 따라서 event listeners와 hooks를 사용할 수 있다.
  • <input> - 요게 search input이다.

• 새로운 handleSearch 함수를 생성하고, input에 onChange listener를 추가하자. input값에 변화가 있을때마다 onChange가 handleSearch를 invoke할 수 있도록 만드는 것이다.

  'use client';
   
  import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
   
  export default function Search({ placeholder }: { placeholder: string }) {
    function handleSearch(term: string) {
      console.log(term);
    }
   
    return (
      <div className="relative flex flex-1 flex-shrink-0">
        <label htmlFor="search" className="sr-only">
          Search
        </label>
        <input
          className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
          placeholder={placeholder}
          onChange={(e) => {
            handleSearch(e.target.value);
          }}
        />
        <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
      </div>
    );
  }
  

  • 수정했으면 개발자도구 콘솔을 연채로 input에 값을 입력해서 제대로 작동하는지 확인해보자.

2. Update the URL with the search params