6 Different Methods to Create Search in Next.js 13

We will build the same search functionality with 6 different methods. First, local search with ‘useState’ and ‘Jotai’. And, then we will build client-side search with ‘swr’ and ‘react query’. Finally, we will build server-side search with ‘Search Params’ and ‘Server Actions’.

Source Code: https://github.com/batuhanbilginn/search-nextjs13
Live Version: https://search-nextjs13.vercel.app/

– timestamps –
00:00 – Intro
00:52 – Project Overview
02:28 – 1) Local Search: useState Hook
06:41 – 2) Local Search: Jotai
11:05 – 3) Client-side Search: useSWR
17:59 – 4) Client-side Search: React Query
22:15 – 5) Server-side Search: Search Params
36:00 – 6) Server-side Search: Server Actions

#nextjs #typescript #search #serveractions #jotai #react