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.

Pagination component

Pagination component - 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

Pagination component

“

So now we want to add our pagination components. Let's create that. So in components, we'll create a new file, not a folder, a file called pagination.jsx, R-A-F-C-E. And then I'm going to grab from the theme files and the properties.html. At the bottom, there's the HTML for the pagination, so right here, this section. So I'm just going to copy that and bring that into here. And then rename all the classes to class name. And then we're going to bring that into the properties component. So let's import pagination. And then let's see, we're going to go down to the bottom here. And I'm going to go right above this last div. And that's where we want to put this. So now we should see the pagination. We have previous, page, whatever of whatever, and then next. Now in the properties JSX, where we embed pagination, there's a few things we want to pass in. So one is the page. So we'll set that to page. And that's coming from the state here. And then we want to pass in page size. So that will be…

Contents