如何在NextJS应用中通过按钮点击实现服务器端API调用

你当前的核心需求是让外部API调用在NextJS服务器端完成，而非客户端直接发起。下面是具体实现方案：

1. 改造内部API路由（承担服务器端调用外部API的职责） #

修改你已有的src/pages/api/users/[id].tsx，让这个路由在服务器环境中发起对目标外部API的请求，再将结果返回给客户端。示例代码如下：

// src/pages/api/users/[id].tsx
import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  // 从请求参数中提取用户ID
  const { id } = req.query

  try {
    // 服务器端调用目标外部API
    const externalApiRes = await fetch(`https://你的目标API地址/users/${id}`, {
      method: 'GET',
      // 若外部API需要认证，可在此添加请求头（敏感信息可存在环境变量中）
      // headers: {
      //   'Authorization': `Bearer ${process.env.EXTERNAL_API_TOKEN}`
      // }
    })

    if (!externalApiRes.ok) {
      throw new Error(`外部API请求失败：${externalApiRes.status}`)
    }

    const userData = await externalApiRes.json()
    // 将外部API返回的数据转发给客户端
    res.status(200).json(userData)
  } catch (error) {
    // 捕获并返回错误信息
    res.status(500).json({ error: (error as Error).message })
  }
}

这个路由现在的作用是：客户端请求它时，NextJS服务器会在自身环境中完成外部API调用，全程客户端仅与自己的NextJS服务器通信，不会直接接触外部API。

2. 客户端按钮触发请求 #

在页面组件中给按钮添加点击事件，调用上述内部API路由即可。示例代码：

// 示例页面：src/pages/index.tsx
'use client' // NextJS 13+ App Router需添加该指令，Pages Router无需
import { useState } from 'react'

export default function Home() {
  const [userId, setUserId] = useState('1')
  const [user, setUser] = useState(null)
  const [error, setError] = useState('')

  const fetchUser = async () => {
    try {
      setError('')
      // 调用内部API路由，触发服务器端的外部API调用
      const res = await fetch(`/api/users/${userId}`)
      if (!res.ok) {
        throw new Error(`请求失败：${res.status}`)
      }
      const data = await res.json()
      setUser(data)
    } catch (err) {
      setError((err as Error).message)
    }
  }

  return (
    <div>
      <input
        type="text"
        value={userId}
        onChange={(e) => setUserId(e.target.value)}
        placeholder="输入用户ID"
      />
      <button onClick={fetchUser}>获取用户信息</button>
      
      {error && <p style={{ color: 'red' }}>{error}</p>}
      {user && (
        <div>
          <h3>用户信息</h3>
          <p>ID: {user.id}</p>
          <p>名称: {user.name}</p>
        </div>
      )}
    </div>
  )
}

关键说明 #

• 服务器端调用的核心逻辑：/api/users/[id]路由运行在NextJS服务器上，fetch请求从服务器发出，客户端无法获取外部API地址、认证token等敏感信息。
• 若使用NextJS 13+ App Router，可将API路由放在app/api/users/[id]/route.ts，逻辑与上述一致。

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