Next.js 开发中如何使用 API 参数实现动态 URL 生成功能

以下是基于你使用的Pages Router（pages目录下的index.js）的两种可行实现方案，可根据你的数据更新频率选择：

方案1：静态生成模式（适合数据不常更新的场景） #

用Next.js自带的getStaticProps在构建阶段请求接口拿数据，直接注入到页面组件属性里：

// pages/index.js
export default function Home({ dataList }) {
  return (
    <div>
      <h1>More details</h1>
      {/* 遍历接口返回的数组，每个条目生成对应跳转链接 */}
      {dataList.map(item => (
        <div key={item.id}>
          <p>所属部门：{item.categories.department}</p>
          <a href={`https://page.com/${item.id}`}>查看详情</a>
        </div>
      ))}
    </div>
  )
}

// 构建时请求API获取数据
export async function getStaticProps() {
  // 替换为你实际的请求地址
  const res = await fetch('你的API接口地址')
  const dataList = await res.json()

  return {
    props: {
      dataList
    },
    // 如果需要定时重新生成静态页可以加revalidate参数，单位是秒，比如1小时更新一次就填3600
    // revalidate: 3600
  }
}

方案2：客户端请求模式（适合数据实时性要求高的场景） #

在组件挂载后用useEffect发起请求拿数据，存在本地state里渲染：

// pages/index.js
import { useEffect, useState } from 'react'

export default function Home() {
  const [dataList, setDataList] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch('你的API接口地址')
        const data = await res.json()
        setDataList(data)
      } catch (err) {
        console.error('接口请求失败', err)
      } finally {
        setLoading(false)
      }
    }
    fetchData()
  }, [])

  if (loading) return <p>数据加载中...</p>

  return (
    <div>
      <h1>More details</h1>
      {dataList.map(item => (
        <div key={item.id}>
          <p>所属部门：{item.categories.department}</p>
          <a href={`https://page.com/${item.id}`}>查看详情</a>
        </div>
      ))}
    </div>
  )
}

注意事项 #

• 你给出的示例API结构里，categories下的department和location属性之间缺少逗号，实际对接时要注意接口返回的JSON格式合法性，避免解析报错。
• 如果跳转目标是Next.js内部的动态路由，建议用自带的Link组件替换原生a标签，能获得更好的跳转性能，比如你有pages/[id].js的动态路由，写法如下：

  import Link from 'next/link'
  <Link href={`/${item.id}`}>查看内部页详情</Link>
  

• 遍历数组渲染元素时必须加key属性，直接用每条数据的唯一id作为值即可，这是React的渲染规则，能避免列表更新时的异常。

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