Next.js Building a Car Trader App #5: Pagination with filters for the list of cars
In this video, we will create the paginated and filtered list of cars.
We will create a getPaginatedCars function that will also be used in the next video API call.
Inside getPaginatedCars we will create a SQL query to filter our cars, using the filters we have done in the previous video on the search page. Then we will use SQLite's LIMIT and OFFSET to paginate our cars.
When our query is finalized, we will call it inside getServerSideProps in order to display our list of cars.
In this video the list display will be done using JSON, in the next video, we will style it using material (@material-ui/core) cards.
We will also touch the concept of shallow rendering in Next.js Link component - briefly.
We will use the Pagination component from @material-ui/lab to have pagination buttons.
I hope you enjoy this video :)
PS - In the video when we used SWR onSuccess we could/should have used an useEffect instead. Link to that specific commit: https://github.com/bmvantunes/youtube...
----
Github Repository: https://github.com/bmvantunes/youtube...
----
Follow me on:
Twitter: / bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
Github: https://github.com/bmvantunes
LinkedIn: / bmvantunes
Watch video Next.js Building a Car Trader App #5: Pagination with filters for the list of cars online without registration, duration hours minute second in high quality. This video was added by user Bruno Antunes 18 May 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 16,135 once and liked it 269 people.