Pagination in Server Component Next js

I have a project that I'm doing. I'm trying to do pagination using the NextJS 13 server component without using use client. We need to make the code work. Now this code only adds a parameter to the page url, but does not add entries to the screen. In theory, it should first show 1 article, then when the button is clicked, 1 more article, then another, and so on. Nothing is happening right now.

//component fetch mdx files

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

interface Blog {
  meta: any;
  slug: string;
}

export function getAllPosts() {
  // 1) Set blogs directory
  const blogDir = "blog";



  // 2) Find all files in the blog directory
  const files = fs.readdirSync(path.join(blogDir));

  // 3) For each blog found
  const blogs: Blog[] = files.map((filename: string) => {
    // 4) Read the content of that blog
    const fileContent = fs.readFileSync(path.join(blogDir, filename), 'utf-8');

    // 5) Extract the metadata from the blog's content
    const { data: frontMatter } = matter(fileContent);

    // 6) Return the metadata and page slug
    return {
      meta: frontMatter,
      slug: filename.replace('.mdx', '')
    };
  });

  return blogs;
}

//page blog

import Link from 'next/link'
import { HomeProps } from "@/types";

import { getAllPosts } from '@/lib/getAllData'
import ShowMore from '@/components/loadmore'


export default function Blog({searchParams } : HomeProps) {


    const blogs = getAllPosts()

    return (
        <main className="flex flex-col">
            <h1 className="text-3xl font-bold">
                Мой блог
            </h1>


            <section className='py-10'>

                <div className='py-2'>

                    {blogs.map((blog) => (
                        <Link href={'/blog/' + blog.slug} passHref key={blog.slug}>
                            <div className='py-2 flex justify-between align-middle gap-2'>
                                <div>
                                    <h3 className="text-lg font-bold">{blog.meta.title}</h3>
                                    <p className="text-gray-400">{blog.meta.description}</p>
                                </div>
                                <div className="my-auto text-gray-400">
                                    <p>{blog.meta.date}</p>
                                </div>
                            </div>
                        </Link>
                    ))}

                    <ShowMore
                        pageNumber={(searchParams.limit || 1) / 1}
                        isNext={(searchParams.limit || 1) > blogs.length}
                    />
                </div>
            </section>
        </main>
    )
}

//loadmore component

"use client";

import { useRouter } from "next/navigation";

import { ShowMoreProps } from "@/types";
import { updateSearchParams } from "@/utils";

const ShowMore = ({ pageNumber, isNext  }: ShowMoreProps) => {
  const router = useRouter();

  const handleNavigation = () => {
    // Calculate the new limit based on the page number and navigation type
    const newLimit = (pageNumber + 1) * 1;

    // Update the "limit" search parameter in the URL with the new value
    const newPathname = updateSearchParams("limit", `${newLimit}`);

    router.push(newPathname);
  };

  return (
    <div className="w-full flex-center gap-5 mt-10">
      {!isNext && (
        <button
          title="Show More"
          onClick={handleNavigation}
        >Кнопка</button>
       )}
    </div>
  );
};

export default ShowMore;

It seems to me that I need to pass the limit parameter to getAllPosts, but how do I do this? Or am I wrong at all? Similar code works on another project, not mine, seen on the Internet

Via Active questions tagged javascript - Stack Overflow https://ift.tt/E4eXWyK