Create A Fully Functional Search Bar in Next.js 14 - Step by Step

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 พ.ย. 2024

ความคิดเห็น • 19

  • @farushko
    @farushko 8 หลายเดือนก่อน +1

    Your videos are great!

  • @DIEZ919191
    @DIEZ919191 6 หลายเดือนก่อน

    man, thank you for this video, it would be really nice to have all the code from the video on github with link in the description, that's how people usually do :)

  • @PavanSibal
    @PavanSibal 2 หลายเดือนก่อน

    Nice tutorial Brett. Thanks. Can we further optimize by just pulling search based rows instead of filtering the whole table.

  • @rookm1270
    @rookm1270 6 หลายเดือนก่อน +1

    Hello! I was wondering if there are any alternatives to search params when making a search bar? I am new-ish to Next.js, but a friend and I have been working on a search function for DNA sequences, and those can get quite long. I have a hunch that using search params to do that would be a bad idea for that reason, but I do not know what to use instead. Thank you!

  • @samibld4494
    @samibld4494 6 หลายเดือนก่อน +1

    thanks for the video , but this implementation caused a problem , when i reload the page with an existing search query the searched result worked fine at first also when editing it , but when i clear the search input it showed me the first result when i reloaded the page, it didn't hit the server but showed the cached result from the first loaded state , to fix this i invoked router.refresh() when the text input is cleared

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  6 หลายเดือนก่อน +1

      No problem, and yes Next.js has a weird default of how data is cached but can be fixed like you did with a simple line of code.

  • @AnikulapoOlawale
    @AnikulapoOlawale 8 หลายเดือนก่อน +1

    Thank you for the videos, but please, the font size of this video is too tiny.

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  8 หลายเดือนก่อน

      No problem and I will try to make it bigger

    • @AnikulapoOlawale
      @AnikulapoOlawale 8 หลายเดือนก่อน

      Thank you so much

    • @3litepker
      @3litepker 7 หลายเดือนก่อน

      @@brettwestwooddeveloper no, it's perfect. I'm watching on a regular 15" laptop screen and have no issues. God knows, he's probably watching it in 480p

  • @ChicotIV13742
    @ChicotIV13742 6 หลายเดือนก่อน

    where is the repo in the description?

  • @haroldpepete
    @haroldpepete 9 หลายเดือนก่อน +1

    23:59 why you make thee check whether isSarray or not twice, the function filteredAudioFiles is only called in line 17 and you already did a check in the first part of if, then you do the same check in the first line of filteredAudioFiles. You can do o top check Array.isArray(audioFiles) && ( audioFiles.length === 0 && (...)

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  9 หลายเดือนก่อน

      Yea you are correct. I should have wrote it like you did.

    • @haroldpepete
      @haroldpepete 9 หลายเดือนก่อน +1

      @@brettwestwooddeveloper it just a tiny correction, but all the video was awesome, thank for share your knowledge

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  9 หลายเดือนก่อน

      @@haroldpepete Thank you!

  • @pablom8854
    @pablom8854 7 หลายเดือนก่อน +1

    You forgot to add suspense for the client component

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  7 หลายเดือนก่อน

      It is not necessary but it does improve the user experience. So, I should have used it. Thanks for watching!

    • @pablom8854
      @pablom8854 7 หลายเดือนก่อน

      @@brettwestwooddeveloper that was fast! If you deploy to vercel you'll get an error, does it work for you without it?