How to create pagination with a content layer in next.js?

NEXTJS + MARKDOWN + CONTENT LAYER

How to create pagination with a content layer in next.js?

They create pagination from scratch without API in the next js and content layer.

The content layer 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

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.

Project Demo

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

Note

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.

How to build the static blog with Content layer, markdown, and nextjs?

Build the static blog with Next.js and Markdown

Pagination

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.

The logic behind the pagination

Build Pagination functionality for the static blog in nextjs.

Start Written code

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

GitHub - officialrajdeepsingh/contentlayer

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

Steps

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.

Change

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

Create pagination UI

Pagination component

Create pagination functionality

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

Bug

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.

Conclusion

The content layer is an excellent library; with the content layer, 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.