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