image refrence: wpxpo
//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