My Updated Way of Adding Pagination w/ Next.js 14, Tailwind CSS and shadcn/ui

In this video I go through how to add pagination using Nextjs 14, Tailwind CSS and shadcn/ui Pagination.
🔗 References:
- Github code: github.com/hqasmei/youtube-tu...
- shadcn/ui Pagination Docs: ui.shadcn.com/docs/components...
- fakerjs Docs: fakerjs.dev/
👩‍💻 Let's Connect
- Discord: / discord
- Github: github.com/hqasmei
- Twitter: / hqasmei
- LinkedIn: / hosnaqasmei
⌛ Timestamps
00:00 Intro
00:18 Prep
02:04 Tutorial
19:07 End

[@lambo-ca]

Finally! Thanks Hosna.

[@zhiwu3121]

very good conten，I like it！

[@user-fi5do4hk3o]

thank you, it worked to me

[@joseaparicio9484]

Thanks for the video.
Would it be worth the effort to make this pagination in a server component?

[@krittiyaclark]

Thank you, Hosna! Can you teach me how to build a blog with tags and pagination like this with Next.js + Prismic?

[@eca8799]

It is advisable to wrap Pagination in PaginationSection? how could access to PaginationItem properties from PaginationSection?

[@jfhandfield]

Got the same kinda question. I know there is a PaginationEllipsis but I don't get what to do. Do I like show 3 pages then the ellipsis and change when the user reach the 3rd?

[@hqasmei]

Yes great question! Completely forgot to include in the video. Just updated the code, so should be there. github.com/hqasmei/youtube-tutorials/tree/main/shadcn-pagination. Also comments in the code.
But you want to set conditions when to show the ellipsis or not.

[@andredesbiens1489]

Very useful, thank you. Just one thing that I would change in your code since you are using TS and this is hurting my eyes
totalPosts: number;
postsPerPage: number;
currentPage: number;
setCurrentPage: (page:number) => void;

[@hqasmei]

Will do thanks for the feedback!

[@pms_code]

Hi Hosna, Do you know, what you are doing? Actually You are motivating me to learn NextJS, Currenly I started to learn NextJS, and found this video, really amazing! Thanks a lot

[@kimhongsieng6457]

Great. HOw to show page like this 1,2,3....,20,21. which 21 is the lat page.

[@hqasmei]

Yes someone just asked the same question! Just updated the code, so should be there. github.com/hqasmei/youtube-tutorials/tree/main/shadcn-pagination. Also comments in the code. Let me know if you have any other questions.

[@kimhongsieng6457]

thanks. do you have a combobox video which get the data from database and list in combobox?
@@hqasmei

[@itachicodes2506]

can you please do a video on carousel?

[@hqasmei]

Will put it on the list, anything with carousel in particular?

[@itachicodes2506]

@@hqasmei thank you && I was thinking of doing like a “language” tab for example: Java, Python, Bash… but I was having trouble implementing /:

[@zenitsu4139]

@@hqasmei Infinite carousel effect/

[@kakajandeveloper]

sorry bro, u dont use features of nextjs 14

[@zenitsu4139]

thanks a lot. Instant sub and like. I was struggling to implement it. Also Can You Make A tutorial For Infinite Carousel