如何在Next.js中实现磁盘Markdown文件的分页加载？

问题描述 #

我用Next.js搭建了一个博客项目，现在需要在blogs页面展示磁盘中的Markdown文件。目前我通过getInitialProps()结合require.context()加载文件，代码如下：

const keys = context.keys()
const values = keys.map(context)
const data = keys.map((key, index) => {
  // 从文件名生成slug
  const slug = key
    .replace(/^.*[\\\/]/, '')
    .split('.')
    .slice(0, -1)
    .join('.')
  const value = values[index]
  // 解析文档中的YAML元数据和Markdown内容
  const md = new MarkdownIt()
  const doc = matter((value as any).default)
  const {orig,...document} = doc
  return {
    document,
    slug,
  }
})
return data
})(require.context('../posts', true, /\.md$/))

现在我想基于这个实现，给这些Markdown文件添加分页加载功能，应该怎么做？

解决方案 #

其实核心思路就是先加载所有Markdown数据，再根据请求的页码和每页数量对数据进行切片，同时把分页相关的关键信息（总页数、当前页码等）传给页面组件来渲染分页控件。具体可以分两步实现：

1. 修改getInitialProps处理分页逻辑

首先把原有的加载Markdown文件的逻辑封装成一个函数，然后添加分页参数的解析、数据切片和分页信息计算的逻辑：

Blogs.getInitialProps = async ({ query }) => {
  // 封装原有加载Markdown文件的逻辑
  const loadAllPosts = (context) => {
    const keys = context.keys()
    const values = keys.map(context)
    const posts = keys.map((key, index) => {
      // 生成slug
      const slug = key
        .replace(/^.*[\\\/]/, '')
        .split('.')
        .slice(0, -1)
        .join('.')
      const value = values[index]
      // 解析YAML元数据和内容
      const doc = matter((value as any).default)
      const { orig, ...document } = doc
      return {
        document,
        slug,
      }
    })
    // 建议按发布日期排序（假设你的Markdown元数据里有date字段）
    return posts.sort((a, b) => new Date(b.document.data.date) - new Date(a.document.data.date))
  }

  // 加载所有博客数据
  const allPosts = loadAllPosts(require.context('../posts', true, /\.md$/))
  
  // 解析分页参数，设置默认值
  const page = parseInt(query.page) || 1
  const limit = parseInt(query.limit) || 10 // 每页默认展示10篇
  const totalPosts = allPosts.length
  const totalPages = Math.ceil(totalPosts / limit)

  // 确保页码在有效范围内（避免出现page=0或page超过总页数的情况）
  const validPage = Math.max(1, Math.min(page, totalPages))
  // 计算当前页数据的起始和结束索引
  const startIndex = (validPage - 1) * limit
  const endIndex = startIndex + limit
  const paginatedPosts = allPosts.slice(startIndex, endIndex)

  // 返回当前页数据和分页信息
  return {
    posts: paginatedPosts,
    currentPage: validPage,
    totalPages,
    limit,
    totalPosts
  }
}

2. 在页面组件中渲染分页控件

拿到分页数据和信息后，就可以在组件里渲染博客列表，同时添加分页导航按钮：

import Link from 'next/link'

const Blogs = ({ posts, currentPage, totalPages, limit }) => {
  return (
    <div className="blog-container">
      {/* 渲染当前页的博客列表 */}
      <div className="blog-list">
        {posts.map(post => (
          <div key={post.slug} className="blog-card">
            <h2>{post.document.data.title}</h2>
            <p className="blog-date">{post.document.data.date}</p>
            <p className="blog-excerpt">{post.document.data.excerpt}</p>
            <Link href={`/blog/${post.slug}`}>查看全文</Link>
          </div>
        ))}
      </div>

      {/* 分页控件 */}
      <div className="pagination">
        {/* 上一页按钮 */}
        <Link href={`/blogs?page=${currentPage - 1}`} passHref>
          <a className="pagination-btn" disabled={currentPage === 1}>上一页</a>
        </Link>

        {/* 页码列表 */}
        {Array.from({ length: totalPages }, (_, i) => i + 1).map(pageNum => (
          <Link key={pageNum} href={`/blogs?page=${pageNum}`} passHref>
            <a className={`pagination-num ${currentPage === pageNum ? 'active' : ''}`}>
              {pageNum}
            </a>
          </Link>
        ))}

        {/* 下一页按钮 */}
        <Link href={`/blogs?page=${currentPage + 1}`} passHref>
          <a className="pagination-btn" disabled={currentPage === totalPages}>下一页</a>
        </Link>
      </div>
    </div>
  )
}

export default Blogs

额外提示 #

• 如果你的Markdown元数据里没有日期字段，可以根据文件的修改时间或者文件名排序，保证分页内容的顺序一致性；
• 可以给分页控件添加简单的CSS样式，提升交互体验；
• 如果是Next.js 13+的App Router，需要把getInitialProps换成generateStaticParams和async function Page的组合，但核心的分页逻辑（数据切片、参数处理）是通用的。

内容的提问来源于stack exchange，提问作者Arta Salahesh