From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Implement pagination

Implement pagination - Next.js Tutorial

From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Start my 1-month free trial Buy for my team

Implement pagination

“

All right, so now we're going to start to implement our pagination. And we have to do this on both the API route, the back end, and the front end component. So let's start off by going to our route where we fetch all of our properties. So that's going to be API properties and then route.js. And this get request is where we want to just change some stuff up. So first off, the way this is going to work is we're going to hit our API route, which will be slash, let's see, slash API slash properties, which we can just hit in the browser to see. It gives us all the properties, right? Well, I want to be able to do properties, question mark, and then page equals something, such as page 2, and we already have it there, and page size equals whatever, 2, 3. Page size is the number of properties that we want on each page. If I do that now, I still get the same result because we're not accounting for these page and page size search params. So that's the first step, is to go into the route here and…

Contents