Nextjs
Published in

Nextjs

How to create pagination with a contentlayer in next.js?
How to create pagination with a contentlayer in next.js?

How to create pagination with a contentlayer in next.js?

The create pagination from scratch without using API in next js and contentlayer.

The contentlayer is an excellent library. You can create pagination from scratch in nextjs.

In your static blog, there are two types of pagination available. The first is API base, and the second is without API.

API pagination is very popular and recommended for everyone. Suppose you do not know about API, and secondly, you have a lazy developer like me. You do not have any time to create an API and test it. Then follow my article. In this article, I make dynamic pagination without API.

demo of the pagination
demo of the pagination

Steps

  1. Project Setup
  2. Project Structure
  3. Posts And Images Dummy data
  4. Pages
  5. Layout
  6. Home Page
  7. Reading Page
  8. Category Page
  9. Tag Page
  10. Search Page and Functionality
  11. SEO
  12. Sitemap
  13. Pagination

In the previous article series, I covered all topics related to the content layer with nextjs. In this article, I cover pagination. The pagination is the last article in this series.

https://contentlayer-iota.vercel.app/

Firstly read an old article series. Without reading old articles, you never understand the logic behind the pagination. First, I recommend reading old articles and then reading the pagination article. If you are a pro developer, you can directly read my article. It is straightforward for you.

Blog pagination functionality help to explore the article on your website. In the static blog, build the pagination functionality a little bit harder. But in this article, I create the pagination functionality in easy ways.

Build Pagination functionality for the static blog in nextjs.
Build Pagination functionality for the static blog in nextjs.

Contenlayer code is available on GitHub. You can download the code locally and play with the code online.

The pagination URL looks like http://localhost:3000/page/2 . The pagination URL creates a dynamic base on your article post count.

  1. Create pages/page/[page].js file in nextjs.
  2. Create a pageCount utility in utils/index.js file.
  3. Define post par page in config.js file.

On the index page, we get a post par page. If you require only ten posts, we filter the first ten posts of the index page help of the javascript slice method. You can use it any other way.

Index
Pagination component

In the next step, we create one more dynamic pages/page/[page].js pagination route of nextjs. It helps to generate pagination functionality for your blog.

With the help of the getStaticPaths and getStaticProps function to build the static blog functionality.

page/[page].js

In this project, you face one extra page on the website. You can easily handle little bugs with UI.

Bug details

http://localhost:3000/

http://localhost:3000/page/1

Index and page/1Both pages are the same in the project. You can hide the /page/1 page with UI. I handle this bug in the pagination component.

Contentlayer is an excellent library; with contentlayer, you can easily create pagination on your blog.

API pagination and without API pagination Both methods work fine for the static blog.

I create pagination without the API method and test on up to fifty articles. It works fine for me.

You can follow and read more articles on officialrajdeepsingh.dev and tag them on Twitter.

Read More content on the Nextjs. Sign up for a free newsletter and join the frontend web community on medium.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store