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