Running a blog with tons of articles? Loading all that content on a single page can be a nightmare! It makes your blog look cluttered, slower to load, and hard to navigate. But fear not, dear reader—pagination is here to save the day!
Pagination divides your web content into smaller, separate pages.
To implement pagination, we brought in the PAGE_LIMIT
constant. Here’s what changed:
page
and limit
parameters.searchParams
for pagination.page
and limit
parameters to read article directories and paginate results.searchParams
and includes navigation buttons.Here’s a snippet of the code that does all this magic:
const PAGE_LIMIT = 5; const getArticles = async (page = 1, limit = PAGE_LIMIT) => { const articlesDirectory = path.join(process.cwd(), 'src/articles'); const files = await fs.promises.readdir(articlesDirectory); // Calculate pagination values const startIndex = (page - 1) * limit; const endIndex = page * limit; const paginatedFiles = files.slice(startIndex, endIndex); const articles = await Promise.all(paginatedFiles.map(async (filename) => { const filePath = path.join(articlesDirectory, filename); const markdownWithMetadata = await fs.promises.readFile(filePath, 'utf-8'); const { data: frontMatter } = matter(markdownWithMetadata); const slug = filename.split('.')[0]; return { ...frontMatter, slug, href: `/article/${slug}`, }; })); return { articles, currentPage: page, totalPages: Math.ceil(files.length / limit), }; }; const Home = async ({ params, searchParams }: HomeProps) => { const page = searchParams.page ? parseInt(searchParams.page as string, PAGE_LIMIT) : 1; const { articles, currentPage, totalPages } = await getArticles(page); const hasPrev = currentPage > 1; const hasNext = currentPage < totalPages; const plasmicData = await PLASMIC.fetchComponentData({ projectId: 'projectId', name: 'componentName', }); const compMeta = plasmicData.entryCompMetas[0]; return ( <> <PlasmicClientRootProvider prefetchedData={plasmicData} prefetchedQueryData={plasmicData.prefetchedQueryData} > <PlasmicComponent component={compMeta.name} componentProps={ { articles: articles.map(article => ({ title: article.title, href: article.href, slug: article.slug, })), actionItems: <div> <div> {hasPrev && <PlasmicComponent component='Button' componentProps={ { title: 'Previous', link: `?page=${currentPage - 1}`, children: <span>← Previous</span>, } as ButtonProps} />} {hasNext && <PlasmicComponent component='Button' componentProps={ { title: 'Next', link: `?page=${currentPage + 1}`, children: <span>Next →</span> } as ButtonProps} />} </div> <PlasmicComponent component='Button' componentProps={ { link: '/', children: <span>← Back home</span> } as ButtonProps} /> </div> } } /> </PlasmicClientRootProvider> </> ); }; export default Home;
A few targeted changes like implementing pagination can dramatically improve the performance and user experience of your blog. Pagination isn't just a feature; it's a nifty little tool that can make your site more efficient, user-friendly, and appealing. So go ahead, give it a try, and watch your blog flourish!
We use cookies to improve your experience and analyze our traffic. By using our site, you consent to our use of cookies. You can manage your preferences below: