DEV Community

Build a Functional Search Bar in Next.js

Stephen Gbolagade on December 03, 2023

The search bar is one of the most important components to integrate for mobile or web applications, especially the ones that deal with users consum...

Read full post

Dusan Petkovic • Dec 5 '23

Thanks!

Stephen Gbolagade • Dec 5 '23

I'm glad you find this helpful

Shakil Ahmed • Dec 4 '23

Exciting tutorial! 🚀 Can't wait to implement a powerful search bar in my Next.js projects. Thanks for breaking it down step by step!

Stephen Gbolagade • Dec 4 '23

Thanks for reading!

White Gui • Jul 19 '24

Thanks for your help!

Tomáš Fülöpp • Apr 1 '24 • Edited

Build fails with:

Please wait... ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/search". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

NB Instead of Homepage.tsx using: /app/search/page.tsx

Stephen Gbolagade • Apr 4 '24 • Edited

Wrap your component with < Suspense /> and the error will be fixed

ubuntupunk • Apr 4 '24

./src/pages/Homepage.ts
Error:
× Expected '>', got 'className'
╭─[/media/afrodeity/Neptune/DRK/searchtut/mysearch/src/pages/Homepage.ts:43:1]
43 │
44 │ return (
45 │
46 │
· ─────────
47 │
48 │

Showing {totalUser} {totalUser > 1 ? "Users" : "User"}

╰────

Caused by:
Syntax Error