How to add Load More button to Sanity posts with pagination?

'use client'

import { useEffect, useState } from "react"
import Image from 'next/image'
import Link from 'next/link'
import type { Posts } from '@/types' // adjust import path as needed

export default function Apps() {
  const [posts, setPosts] = useState<Posts[]>([]);
  const [lastId, setLastId] = useState<string | null>(null);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);

  const loadPosts = async (lastPostId: string | null = null) => {
    setLoading(true);
    const url = lastPostId 
      ? `/api/posts?lastId=${lastPostId}` 
      : '/api/posts';
    
    const res = await fetch(url);
    const data = await res.json();
    
    if (data.posts.length < 24) {
      setHasMore(false);
    }
    
    setPosts(prev => lastPostId ? [...prev, ...data.posts] : data.posts);
    if (data.posts.length > 0) {
      setLastId(data.posts[data.posts.length - 1]._id);
    }
    setLoading(false);
  };

  useEffect(() => {
    loadPosts();
  }, []);

  const showMoreItems = () => {
    loadPosts(lastId);
  };

  return (
    <main className="container py-12">
      <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-12 2xl:gap-16'>
        {posts.map((post) => {
          return (
            <div key={post._id} className='space-y-4'>
              <Link
                href={post.url}
                target='_blank'
                title={post.name}
                rel="noopener noreferrer inline-block"
              >
                <div className="relative">
                  <Image
                    src={post.image}
                    alt={post.name}
                    width={460}
                    height={320}
                    className={post.border ? "object-cover rounded-lg w-full border border-slate-200" : "object-cover rounded-lg w-full"}
                  />
      
                  {post.new && <div className="absolute right-2 top-2 z-10 bg-blue-600 text-white text-xs py-0.5 px-1.5 rounded">New</div>}
                </div>
              </Link>

              <h2 className='text-2xl md:text-3xl font-bold leading-tight text-default'>{post.name}</h2>
              <p className='md:text-lg leading-relaxed font-light text-default'>{post.content}</p>
            </div>
          );
        })}
      </div>

      {hasMore && (
        <button 
          className="py-3 w-full bg-blue-600 text-white mt-4 rounded-lg disabled:opacity-50" 
          onClick={showMoreItems}
          disabled={loading}
        >
          {loading ? 'Loading...' : 'Load More'}
        </button>
      )}
    </main>
  );
}

import { client } from '@/sanity-utils' // adjust import path
import groq from 'groq'
import { NextResponse } from 'next/server'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const lastId = searchParams.get('lastId');
  
  // Filter-based pagination: fetch posts after the lastId
  const query = lastId
    ? groq`*[_type == "posts" && _id > $lastId] | order(_id) [0...24] {
        _id,
        new,
        name,
        url,
        "image": image.asset->url,
        "alt": image.alt,
        border,
        content,
        category->,
        author->,
      }`
    : groq`*[_type == "posts"] | order(_id) [0...24] {
        _id,
        new,
        name,
        url,
        "image": image.asset->url,
        "alt": image.alt,
        border,
        content,
        category->,
        author->,
      }`;
  
  const posts = await client.fetch(query, { lastId });
  
  return NextResponse.json({ posts });
}