如何让最新的博客文章出现在 NextJS 博客的顶部？

Question

我有一个带有博客页面的 Next JS 网站。在 /blog 页面上使用 slug 数据填充页面的位置，一切都已正确设置。目前，该页面上的博客帖子显示最新帖子出现在较旧的帖子下方。我想扭转这一点，以便当客户上传新帖子时，它会出现在顶部。

HTML

<div className='container'>
       {blogs.map(blog => (
          <div className='row blog-content'>
              <div className='col-lg-6 blog-image-body'>
                  <img className='blog-image' src={blog.image} />
              </div>
              <div className='col-lg-6 blog-body'>
                  <div className='blog-card'>
                      <h2 className='blog-date'>{blog.date}</h2>
                      <h1 className='blog-title'>{blog.title}</h1>
                      <div className='main-btn-body'>
                          <Link 
                              className='link-body'
                              rel="noreferrer"
                              href={`/blog/${blog.slug}`}>
                              <button type="submit" className="main-btn">
                              Read Full Post</button>
                          </Link>
                      </div>
                  </div>
              </div>
          </div>
        ))}
      </div>

getStaticProps() js代码：

export async function getStaticProps() {
  // List of files in blgos folder
  const filesInBlogs = fs.readdirSync('./content/blogs')

  // Get the front matter and slug (the filename without .md) of all files
  const blogs = filesInBlogs.map(filename => {
    const file = fs.readFileSync(`./content/blogs/${filename}`, 'utf8')
    const matterData = matter(file)

    return {
      ...matterData.data, // matterData.data contains front matter
      slug: filename.slice(0, filename.indexOf('.'))
    }
  })

  return {
    props: {
      blogs
    }
  }

}

感谢您提供任何信息！

我尝试在网上查找任何信息，但未能成功。

Answer 1

const data = blogs.slice().reverse()
<div className='container'>
       {data.map(blog => (
          <div>
              {blog.name}
          </div>
        ))}
      </div>

你可以试试这个