- Published on
Load More Button In Next.js
- Authors
How implement [Load More] Button In Next.js
//Nextjs App: pages/blog/index.js
import Blog from '../../components/post/Blog'
import allPosts from '../../data/posts.json'
import { useState } from 'react'
const Posts = () => {
allPosts.reverse()
const [visible, setVisible] = useState(20) //20 initial posts
const showMoreItems = () => {
setVisible((prevValue) => prevValue + 10) //load 10 more post
}
return (
<div>
<h1>All Posts</h1>
<Blog posts={allPosts.slice(0, visible)} /> //This component show a list of posts
<button className="" onClick={showMoreItems}>
Load More
</button>
</div>
)
}
export default Posts