Server-side Pagination with NextJS 13 Server Actions

hi there welcome to my channel I am about to run through how to set up serers side rendered offset based pagination on nextjs and this is if you want to create a list of public listing cards like a shop this is probably the best way to do it because it's all on the server all the pagination so yeah this is how it looks set up a pretty basic grid of listings as you can see we're on page one and we're using the URL search parameters to navigate through the pages each page is a link so search engines will pick them up and this is highly optimized for um SEO and it's all on the server so you can see it's instant loading so let's get into it I have created a template project using Create next app to do that you would simply run MPX create next app latest but I've already done that I've gone ahead and set up quite a few other things I'm using bun to install all node modules cuz it's extremely fast do bun install you can see what node modules we've got here there's quite a few so bun install let's see how long that takes 595 milliseconds so pretty quick compared to mpm and um yarn so I would definitely suggest using that let's first start off with what I've installed in addition to the create next app defaults create next app installs typescript uh es link by default you can choose whether or not you want to use typescript or or Java scrip gone ahead and installed Prisma set up a database I'm accessing locally database is called offset SSR this is my environment variable now neat little way to create a database quickly is just this create DB and you can put any- DB and it will just create your database directly on your local environment you'll need to have psql installed for that really quick way of creating a database okay so let's continue we have install Prisma we've got got our nextjs app we're actually loading our environment variables through T3 OSS EMV nextjs this is by Theo or T3 app the developers of the T3 app it's really handy to be honest it gives you kind of type safety with your environment variables so all your server environment variables go in here all your client in here and then combined go into here and then you can actually access them easily just using this EnV variable throughout your app and you have full type safety okay so what we do here is we import that into our MJS next config we've got in our domains URL for for loading images we've got server actions enabled typed throughout enable these are experimental this is our TS config TS config es link our Tailwind config and our prettier so as you can see I have already created some basic elements like button input link footer header sidebar and so if we just cross this out load this up on Port 3000 okay there we go there's our layout obviously uh that's now called X but we've got a Twitter icon for now just some basic stuff we want to start by creating a feed component and so now next year his app browser has a page and a layout and if you're female you're with it the layout is what wraps the page effectively in in the directory that we're in we're not going to create any additional Pages the way this works is we've got the children which is essentially the page so this and the layout is the global layout cuz it's in the appap directory and as you can see we've got HTML and body there we have the sidebar in here and then we've got our main content also good for SEO because the main essentially tells search engines this is the content that might change the rest of it is more or less always going to stay the same and then we've got our type for page props which is uh the default page props I console log this you can see we have prams and search prams in the console meaning this is being server rendered and that's the the parameters you get back from uh the page so next step is to create a feed and I'm going to do that by creating a new component called feed. TSX and I'm going to just create this so now if I bring the feed into here there we go the car feed I'm going to start by creating a server action I'm going to create con fetch feed equals and I'm going to use server in here so this basically says this is a server action now kind of what we're wanting to do is pass in the C and we want to also pass in the skip so I'm going to put results equals Prisma just realize we actually need to seed the database and I've created this um simple seed command for seeding the Prisma database and so I'm going to run this what this does is it creates a user John it example.com it just uh creates about 50 listings there and if you look at our Prisma schema that's that's our schema and so we're effectively going to create these listings and these images so we can pull them from the database so let's do that P Prisma DBC that actually uses a seed command that is in our package Json this one here and it's executed so pdev right now we can do p Prisma do listings. find many or Prisma listing. find many and then we want to tape Skip and we want the order Buy price price ascending so you'll note that in the seed file we actually incremented the price by 100 um on each iteration of the loop so we want to just show that in the results on the feed now we need the total so Prisma listing. count oh forgot one of these data results and we also need to return some metadata which is has next page and we do this by we skip plus take equal minus total there we go and we also want to return the total Pages math. seal total divided by take grade into away these of course no no promises and let's just type this as well so type uh fetch feed return type equals type of fet feet type can export that great so we've got this server action that we've created and uh now we can get into actually listing them so let's start by now creating a card so a listing card so I'm going to new file card. TSX R AFC cool listing card and that way we can do this array do from length 10 do map uh nothing and index and we can return card with a key ideal cool so we've got our feed so we're going to add it to our page here which we've done um and we can actually pass these props down obviously it isn't accepting those yet but props and Page props okay great let's have a look refresh cool we've got our listing card great do this one class name equals space y 12 and then I'm am going to dip this cool so got a grid now perfect now we need to just work on the listing card UI which I created before and I'm going to rename this to listing card so r r AFC listing card so we've got listing cards there got our card UI so now we actually want to change this to listing card excellent so we've still we got our listing cards there perfect UI that I just created so the props that we want to take in are the listing and we could just put a tight definition here because ultimately uh these are the fields that we want to show on our listing cards let's just const get rid of all these and equal props perfect get rid of that don't need that don't need seller ID don't need end dat we just need Title description image and price here is the wrapper component for the card here is the image cool so let's just first of all actually get this dat from the server Action Now how will we do that well basically this a simple as this const data equals fch feed um and we need to also make this asynchronous we can do this because it is a uh server component which we can mark it as use server get rid of the card and uh we have our data here so can actually just pass in that data because effectively that data is the same structure as a listing um let's have a look do we get that return back data no but effectively it is a listing because we do listing find many and we get an array of listings so so we can actually do this now data map and we can pass in a single listing into here let's have a look listing has type any data does not exist on promised that is because I didn't a this boom there we go we've got our dates being passed in so let's continue with building the card should we take a look at where we're at ah nice card content here um we have a format currency utility it is just a Intel number format simple JavaScript some more info about it here and that just formats our currency see I in the UK so it is going to format into the UK currency in the card footer we have a call to action and there we go so now we have our listings which is great but we do not have a way of paginating over them at the moment so I'm going to create a pagination component pagination TSX and same as usual great we've got our pagination component so we now need to bring in our pation and you can see it's there at the bottom I would now like to uh build this pagination component out props pagination props type pagination props equals and so we're going to pass in the page total pages and has next page and let's just destructure that we can set a default value of one so we're always on page one by default and then let's just bring this in all right there we go our pagination component currently there's no Pages because we're not passing in any data in fact let me just turn this dark mode off dark mode class nice much better um so we'll need to actually give this pagination a better text color yeah nice all right so what do we need to pass in well we need a page total pages and has next page so the way that we're linking through pages as I said before um at the start of the video we are doing page equals one we can actually get this on the server side and use it uh to map through all the pages so that is where these props come in page props we've got the search prams in here and we can just basically destructure that so if I do console.log props do search PS you'll see page one if I change that page two nice that's on the server okay so if we can pass in the props do search perms as well as we want to pass in so first of all we need to actually get the meth data out of here as well M Pro that great and if we console. log these you'll see we've got all the listings and then the metadata we've got a total of seven pages and has next page true which is what we want so that's all the correct information being passed into the pagination component now the only thing that we don't have uh we do have these pages and we can link to each one but as you can see we're not actually changing the page we are changing the query parameter the URL parameter but we're not actually getting new data and that is where this comes in revalidate path we want to revalidate the path on here and then we want to actually pass in Dynamic variables so we've got page size our page size is here so let's just create const page size equals 8 page size and we default this to skip we're defaulting that to page size bait need to do search perams here page so the page number is defaulting to one again we are taking page size of eight we are skipping the current page number which is the page minus one basically gives us the amount of listings we want to skip and so we pass these in pass in the take pass in the skip so now we're passing these in to our server action and these are being created from the page number which we are getting from the page props which is the search parameters and let's have a look does it work okay looks like we are on a different page so if I go page two page one look at that that is instant and there you go that's it fully serviced side rendered pagination there's nothing here that is using uh use client there we go cool I hope you enjoyed the video and um give it a thumbs up feel free to subscribe check out all the links below I'm going to post the GitHub repository for this and maybe integrate it into your own project

Channel: Taylor Lindores-Reeves

Views: 4,005

Keywords:

Id: cxxumABmLYA

Length: 19min 27sec (1167 seconds)

Published: Sun Oct 15 2023