LOAD MORE button in blog page.md

image refrence: wpxpo

LOAD MORE 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;

Please leave me a comment if it is useful. Thanks