NextJS对接Pexels API如何实现加载更多分页功能

Pexels API分页规则说明 #

Pexels的图片查询接口（包括精选图、搜索图接口）统一使用两个参数控制分页：

• page：要请求的页码，默认值为1，每次加载更多时递增该参数即可获取下一页数据
• per_page：单页返回的图片数量，取值范围1-80，默认返回15条
  接口返回结果会携带total_results字段，代表符合条件的总图片数，可用来判断是否还有更多数据可加载。

具体实现步骤 #

1. 标记组件为客户端组件 #

因为需要监听点击事件、维护本地状态，组件顶部需要添加'use client'声明。

2. 定义所需状态 #

import { useState, useEffect } from 'react'

// 单页加载数量可自行调整，最大不超过80
const PER_PAGE = 20

export default function Gallery() {
  // 存储所有已加载的图片数据
  const [photos, setPhotos] = useState([])
  // 当前请求的页码
  const [currentPage, setCurrentPage] = useState(1)
  // 加载状态，防止重复点击触发多次请求
  const [isLoading, setIsLoading] = useState(false)
  // 是否还有更多数据可加载
  const [hasMore, setHasMore] = useState(true)

3. 封装Pexels数据请求函数 #

const fetchPhotos = async (page) => {
    setIsLoading(true)
    try {
      // 如果是搜索类画廊，替换为搜索接口：https://api.pexels.com/v1/search?query=你的搜索关键词&page=${page}&per_page=${PER_PAGE}
      const res = await fetch(`https://api.pexels.com/v1/curated?page=${page}&per_page=${PER_PAGE}`, {
        headers: {
          Authorization: '替换为你自己的Pexels API Key'
        }
      })
      const data = await res.json()
      // 把新请求到的图片数据拼到原有数组末尾
      setPhotos(prev => [...prev, ...data.photos])
      // 校验是否还有下一页数据
      if (page * PER_PAGE >= data.total_results) {
        setHasMore(false)
      }
    } catch (err) {
      console.error('请求Pexels API失败：', err)
    } finally {
      setIsLoading(false)
    }
  }

4. 编写初始加载和点击加载逻辑 #

// 组件挂载时加载第一页数据
  useEffect(() => {
    fetchPhotos(1)
  }, [])

  // 点击show more按钮触发的逻辑
  const handleLoadMore = () => {
    const nextPage = currentPage + 1
    setCurrentPage(nextPage)
    fetchPhotos(nextPage)
  }

5. 渲染画廊和加载按钮 #

return (
    <div>
      {/* 替换为你自己的画廊布局代码 */}
      <div className="grid grid-cols-3 gap-4">
        {photos.map(photo => (
          <img key={photo.id} src={photo.src.medium} alt={photo.alt} />
        ))}
      </div>
      {/* 没有更多数据时自动隐藏按钮 */}
      {hasMore && (
        <button 
          onClick={handleLoadMore}
          disabled={isLoading}
          className="mt-8 px-4 py-2 bg-blue-500 text-white rounded"
        >
          {isLoading ? '加载中...' : 'show more'}
        </button>
      )}
    </div>
  )
}

注意事项 #

• 生产环境建议将Pexels API请求通过后端转发，避免直接在前端暴露API Key导致泄露
• Pexels API有请求频率限制，每小时最多请求200次，建议做好请求缓存避免触发限流

内容的提问来源于stack exchange，提问作者Vitor Lacerda