使用Next.js+GraphCMS搭建博客：如何限制前端显示的文章数量？

针对你的需求，以下几种JavaScript层面的方法可以快速实现只显示1篇文章：

方法1：使用数组slice()方法截取首个元素 #

slice(start, end)可以从数组中提取指定范围的元素，用slice(0, 1)就能获取数组的第一个元素（返回长度为1的新数组），再配合map渲染即可：

const posts = [
    {title: 'Sample Post 1', description: 'Lorem ipsum dolor sit amet'},
    {title: 'Sample Post 2', description: 'Lorem ipsum dolor sit amet'}
];

<div>
    {
        posts.slice(0, 1).map((post, index) => (
            <div key={index}>
                <h1>{post.title}</h1>
                <p>{post.description}</p>
            </div>
        ))
    }
</div>

注意：给渲染的元素加上key属性是React/Next.js的最佳实践，避免控制台警告。

方法2：直接渲染单个元素（无需遍历） #

如果只需要显示1篇文章，完全不用map遍历数组，直接取数组的第一个元素（posts[0]），同时增加非空判断避免空数组报错：

const posts = [
    {title: 'Sample Post 1', description: 'Lorem ipsum dolor sit amet'},
    {title: 'Sample Post 2', description: 'Lorem ipsum dolor sit amet'}
];

<div>
    {posts[0] && (
        <div>
            <h1>{posts[0].title}</h1>
            <p>{posts[0].description}</p>
        </div>
    )}
</div>

这种方式更高效，省去了数组遍历的额外开销。

额外建议：从后端查询时限制数量 #

虽然你问的是JavaScript层面的实现，但更优的方案是在GraphCMS的查询中直接限制返回的文章数量（比如用limit: 1），这样可以减少不必要的数据传输，提升页面性能。例如GraphQL查询可以写成：

query GetPosts {
  posts(limit: 1) {
    title
    description
  }
}

内容的提问来源于stack exchange，提问作者S.M Naveen