我有一个我正在做的项目。我正在尝试使用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,但我如何做到这一点呢?还是我错了类似的代码在另一个项目上工作,不是我的,在互联网上看到的
1条答案
按热度按时间wgeznvg71#
通常,您需要修改getAllPosts函数以接受一个limit参数,然后在返回之前使用该参数对博客文章数组进行切片。下面是一个粗略的示例,说明您可能如何执行此操作:
字符串
然后,在Blog组件中,将searchParams的限制传递给getAllPosts:
型