In front-end application development, pagination and the implementation of a powerful search engine are commonly requested features.

Image of search engine

In this article, I'll guide you through setting up a search engine with pagination in React, using Next.js.

The basics: query params, hooks and pagination logic

1. query params management in Next.js

Query params are parameters added to the URL to transmit information such as the current page or the number of items per page. This allows you to keep track of pagination and filters between navigations.

In Next.js, the useSearchParams function makes it easy to retrieve and manipulate query params.

Example:

const searchParams = useSearchParams();
 
const page = Number(searchParams.get('page')) || 1;
const itemsPerPage = Number(searchParams.get('items-per-page')) || 5;

Here, we extract the page and items-per-page parameters from the URL. If no parameters are present, default values are used.

2. Using `useState` and `useMemo` hooks

The useState and useMemo hooks are essential for state management and performance optimization in a React application.

useState**: Allows you to manage local state, such as user search.
useMemo**: Optimizes filtering and calculation logic by memorizing results, thus avoiding costly calculations at each rendering.

Filter example with useMemo:

const [query, setQuery] = useState('');
 
const filteredArticles = useMemo(() => {
if (!query) return posts;
 
return posts.filter(item => 
item.metadata.title.toLowerCase().includes(query.toLowerCase()) ||
item.metadata.summary.toLowerCase().includes(query.toLowerCase())
);
}, [posts, query]);

In this example, useMemo optimizes the article filtering logic. If the query changes, the search status is updated and articles are filtered according to title and summary.

3. Pagination logic

Pagination is used to divide a large amount of data into several pages for easier navigation. Here, we calculate which items to display based on the current page and the number of items per page.

Calculation of items to display:

const start = (page - 1) * itemsPerPage;
const end = start + itemsPerPage;
 
const articlesToDisplay = filteredArticles.slice(start, end);

The start (start) and end (end) indexes of articles to be displayed are determined according to the page and items per page.

4. Setting up pagination controls

The "Next" and "Previous" buttons are used to navigate between pages. We use the useRouter hook to manage navigation with Next.js.

Example of pagination controls:

const PaginationControls = ({ page, hasNextPage, hasPrevPage, locale }) => {
const router = useRouter();
const searchParams = useSearchParams();
const itemsPerPage = searchParams.get('items-per-page') ?? '5';
 
return (
<div className='flex justify-between'>
<button
disabled={!hasPrevPage}
onClick={() => router.push(`/${locale}/blog?page=${page - 1}&items-per-page=${itemsPerPage}`)}
>
Previous
</button>
 
<button
disabled={!hasNextPage}
onClick={() => router.push(`/${locale}/blog?page=${page + 1}&items-per-page=${itemsPerPage}`)}
>
Next
</button>
</div>
);
};

Buttons control navigation between pages while maintaining pagination status in query params.

Conclusion

By combining React hooks (useState, useMemo) and Next.js query params, you can implement high-performance pagination and an efficient search engine. Managing paginated data improves the user experience, especially with large volumes of data. The fundamental concept is to always optimize code performance and readability, especially when users interact with a real-time search engine.

Articles

SZ