Next JS Pagination | Chinese Rule of Eight

ref – https://codesandbox.io/p/github/Elijah-trillionz/swr-features-app/main?file=/pages/fetching/numbered-pagination-comments.js:1,1-51,1

import { useState } from 'react';

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function Home() {

const [pageIndex, setPageIndex] = useState(1);

const { data: comments, isLoading } = useSWR(

`https://jsonplaceholder.typicode.com/comments?_page=${pageIndex}&_limit=6`,

fetcher

);

return (

<h1 className='text-secondary font-bold text-xl'>Comments App</h1>

</header>

{isLoading ? (

<p className='text-secondary'>Loading comments</p>

) : (

{comments.map((comment, index) => (

{comment.name}

</span>

<span className='text-secondary'>{comment.body}</span>

</li>

))}

</ul>

)}

<button

className='block rounded-md border-2 border-secondary border-solid text-secondary bg-primary font-bold py-2 px-5'

onClick={() => setPageIndex((_currentPage) => _currentPage - 1)}

</button>

<button

className='block rounded-md border-2 border-secondary border-solid text-secondary bg-primary font-bold py-2 px-5'

onClick={() => setPageIndex((_currentPage) => _currentPage + 1)}

</button>

</div>

</main>

</>

);

}