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...
Collapse
 
dsaga profile image
Dusan Petkovic

Thanks!

Collapse
 
stephengade profile image
Stephen Gbolagade

I'm glad you find this helpful

Collapse
 
shakilahmed007 profile image
Shakil Ahmed

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

Collapse
 
stephengade profile image
Stephen Gbolagade

Thanks for reading!

Collapse
 
white_gui_677361f73cc80f9 profile image
White Gui

Thanks for your help!

Collapse
 
vacilando profile image
Tomรกลก Fรผlรถpp • 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

Collapse
 
stephengade profile image
Stephen Gbolagade • Edited

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

Collapse
 
ubuntupunk profile image
ubuntupunk

./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

Collapse
 
stephengade profile image
Stephen Gbolagade

You probably mistyped something, could you please share your code snippet so I can debug it for you?

Collapse
 
mitchiemt11 profile image
Mitchell Mutandah

Nice read!

Collapse
 
stephengade profile image
Stephen Gbolagade

Thanks for reading ๐Ÿ™