Build A Functional Search Bar with Next.js (SearchParams)

Поділитися
Вставка
  • Опубліковано 29 жов 2024

КОМЕНТАРІ • 47

  • @amberm-31
    @amberm-31 9 місяців тому +1

    I wasted a few hours trying to figure some of this out and then skipped to the middle of your video and got my errors fixed in 5 minutes. Life saver. Thank you.

  • @0the0ambient0
    @0the0ambient0 9 місяців тому +1

    Nice video. Thank you. It answers some things more clearly than other resources (including the Next.js docs)

  • @interactive-scene
    @interactive-scene Рік тому +2

    You provided amazing tutorials on the new version of Next.js. I was thrilled to find your tutorials so quickly after the release of the update!

  • @oOserkanCakmakOo
    @oOserkanCakmakOo Рік тому +1

    Thank you for sharing useful informations Brett

  • @johnysnowy35
    @johnysnowy35 Рік тому +1

    Thanks, I was struggling with NextJS (coming from React) and this example was perfect to understand the basic nuances.

  • @maskman4821
    @maskman4821 Рік тому +1

    This is very useful and practical project, thank you Sir so much 🙏

  • @eshw23
    @eshw23 Рік тому +2

    Nice video, a video on Nextjs Api routes with CRUD functionality would be great, preferably using React query and axios instead of fetch, along with dynamic routes on the client side to if possible, maybe a simple todo app tutorial or something. Thanks!

  • @chriseski
    @chriseski Рік тому +1

    The content you are working on in each of your videos are really to the point and very usefull. Simple and nice explanation as well! But Brett, when I see your desktop, I get instant anxiety disorder 😅. I am one of those order freaks, I admit it... Thank you for your helpfull videos, keep up! 💪

  • @Sylar7773
    @Sylar7773 Рік тому +1

    Thank YOU very very very much!!!

  • @codedwebs
    @codedwebs Рік тому +1

    Hi, Brett you are doing great work. i think i want to point out is that I feel your voice is low. On 100% volume sometime its hard to understand what you saying.

  • @kenthefley2226
    @kenthefley2226 Рік тому +2

    Brett, just out of curiosity, Why did you use an API endpoint instead of just fetching the data from a server component in the app router?

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  Рік тому +1

      I was using the useState hook and wanted my fetch to come from a server. I assume you can probably do what you are saying as well. I think there is multiple ways to do one thing

    • @kenthefley2226
      @kenthefley2226 Рік тому +1

      @@brettwestwooddeveloper thanks Brett. I'm glad you did it this way. I need to learn the API routes.

    • @ozgursar5386
      @ozgursar5386 Рік тому +2

      This is usually done to hide sensitive data such as API keys from the client-side

  • @chetanpanchal888
    @chetanpanchal888 10 місяців тому

    Hi Brett,
    This tutorial is really helpful but I different use case - I have home page and search results page I have search bar on both the pages now my problem is when I search from result page I am able to getSearchResults but from home page I am unable to handle this. Any idea or suggestion?

  • @nourara-sl1hu
    @nourara-sl1hu 8 місяців тому +1

    nice video , can you help me to find this benift in VC code when you start writing the first word the vc code gaves you the complete sentence

  • @stevebendersky2056
    @stevebendersky2056 Рік тому +1

    using api folder with route.js is considered to be more correct? because I don't see any difference if I just use regular fetch in the component itself

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  Рік тому +1

      yes route.js or route.ts is the correct syntax

    • @stevebendersky2056
      @stevebendersky2056 Рік тому

      okay thanks. and then I could use it within async server component?@@brettwestwooddeveloper

    • @stevebendersky2056
      @stevebendersky2056 Рік тому

      and also, how can I access cookies from the route? as I want to send the user accesstoken in each fetch request through Authorisation

  • @temzeks
    @temzeks Рік тому +1

    I want to implement same approach for a search, but with multiple dropdowns, would this approach still be viable for me ?

  • @stevebendersky2056
    @stevebendersky2056 Рік тому +1

    Why use traditional useState and useEffect? why not just useSWR to fetch the data?

  • @loc5706
    @loc5706 5 місяців тому

    how about search as you type? why need to press enter?

  • @webber5629
    @webber5629 Рік тому

    Thanks , But how to fetch the coins if the user types anything in input automatically fetching that data without need to click search button ?

    • @dingusn
      @dingusn Рік тому

      You would just call the handleSubmit function in the onChange in the input rather than on the button.

  • @prathamesh_dalvi9421
    @prathamesh_dalvi9421 Рік тому

    can u make a video oif how to merge elastic search to this search bar

  • @nuvola-b
    @nuvola-b Рік тому +1

    this is not server side. whats the point of writing nextjs 13 if you use it client side? it becomes basic react.

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  Рік тому

      Yea thought the same idk though

    • @codingtranquility
      @codingtranquility Рік тому +1

      From my understanding you would use client side for more dynamic pages, and server side for more static. The advantages of next would be the cooked in optimizations, and it being more maintained. For this kind of application you could just use Vite, but you'd be missing out on Next's router etc.

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  Рік тому

      you are correct.@@codingtranquility

  • @yaswanthg5
    @yaswanthg5 Рік тому +1

    This is old way of data fetching. Next JS documentation data fetching recommends fetching on server side. Better to use SRC

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  Рік тому

      I have a video on data fetching with server side, technically you can do client or server, but if you want to use React hooks then it must be client

  • @dominiondaniel1585
    @dominiondaniel1585 Рік тому +2

    You did a great job but please,next time go straight to the point.We already know how to create a next app.

  • @yaswanthg5
    @yaswanthg5 Рік тому

    This is old way of data fetching. Next JS documentation data fetching recommends fetching on server side. Better to use SRC

    • @nusesteroide
      @nusesteroide Рік тому

      Can you provide link to do it server side ?