How to Create Pagination in Next.js with Shadcn UI

Check out MiniTool MovieMaker: https://bit.ly/4hKFA9A
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.vercel.app/
- [Shadcn UI]: https://ui.shadcn.com/
- [Jsonplaceholder]: https://jsonplaceholder.typicode.com/posts?_start=1&_limit=5

⏱️ 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/nextjs-paginate

🌐 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