服务器组件Next js中的分页

ujv3wf0j  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(130)

我有一个我正在做的项目。我正在尝试使用NextJS 13服务器组件进行分页,而不使用客户端。我们需要让代码工作。现在这段代码只向页面URL添加了一个参数,但不向屏幕添加条目。从理论上讲,它应该首先显示1篇文章,然后当按钮被单击时,再显示1篇文章,然后是另一篇文章,依此类推。现在什么都没发生。

//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;

在我看来,我需要将limit参数传递给getAllPosts,但我如何做到这一点呢?还是我错了类似的代码在另一个项目上工作,不是我的,在互联网上看到的

wgeznvg7

wgeznvg71#

通常,您需要修改getAllPosts函数以接受一个limit参数,然后在返回之前使用该参数对博客文章数组进行切片。下面是一个粗略的示例,说明您可能如何执行此操作:

export function getAllPosts(limit) {
  // ...existing code...

  // Slice the array of blogs before returning it
  return blogs.slice(0, limit);
}

字符串
然后,在Blog组件中,将searchParams的限制传递给getAllPosts:

const blogs = getAllPosts(searchParams.limit);

相关问题