How to Create Pagination in Next.js with Shadcn UI
In this video, I’ll show you how to create pagination in a Next.js app using ShadCN UI. We'll also use the Fetch API to get data from the JSONPlaceholder API, so you can easily understand how pagination works in a real-world scenario. Whether you're a beginner or looking to enhance your Next.js skills, this tutorial will guide you step-by-step!
🚀 Live Final Project:
https://nextjs-paginate-five.vercel.app/
🛠️ Tools & Packages Used:
[Pagination with Nextjs Links] - https://shadcn-next-link-pagination.v...
[Shadcn UI]: https://ui.shadcn.com/
[Jsonplaceholder]: https://jsonplaceholder.typicode.com/...
⏱️ Timestamps:
00:00 - Introduction
00:52 - Installing and Setting Up Next.js with ShadCN
02:44 - Building the fetchPosts Function
07:26 - Creating the Posts Component
12:11 - Fetching and Rendering Posts from JSONPlaceholder
16:15 - Implementing Pagination
💻 Get the Source Code:
GitHub: https://github.com/candraKriswinarto/...
🌐 Recommended Digital Tools (Affiliate Links):
Hostinger: Get 20% Off on Web Hosting - https://dub.sh/zrpWarU
👍 If you found this video helpful, please like, and subscribe!
❓ Any questions? Drop them in the comments below!
#Coding #nextjs #pagination
Watch video How to Create Pagination in Next.js with Shadcn UI online, duration hours minute second in high quality that is uploaded to the channel Cand Dev 04 October 2024. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 817 times and liked it 44 visitors.
