编辑“︁Next.js外部API集成”︁（章节）

= Next.js外部API集成 =

== 介绍 ==  
'''Next.js外部API集成'''是指在Next.js应用程序中调用第三方API（如RESTful API、GraphQL API等）以获取或发送数据的过程。Next.js提供了多种数据获取方法（如`getStaticProps`、`getServerSideProps`和客户端获取），开发者可以根据需求选择合适的方式与外部API交互。此功能在构建动态网站、集成支付系统或显示实时数据等场景中至关重要。

== 核心方法 ==  
Next.js支持以下主要方式集成外部API：

=== 1. 服务端获取（Server-side Fetching） ===  
在服务端渲染（SSR）或静态生成（SSG）时预获取数据，适用于SEO优化或首屏加载性能要求高的场景。

==== 示例：`getStaticProps` + REST API ====  
<syntaxhighlight lang="javascript">
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // 传递给页面组件
    revalidate: 60,  // 启用增量静态再生（ISR）
  };
}
</syntaxhighlight>

'''输入'''：GET请求到`https://api.example.com/data`  
'''输出'''：页面组件接收`data`属性，静态生成HTML。

=== 2. 客户端获取（Client-side Fetching） ===  
使用`useEffect`或库如`SWR`/`TanStack Query`在浏览器中获取数据，适合用户交互驱动的场景。

==== 示例：`useEffect` + Fetch API ====  
<syntaxhighlight lang="javascript">
import { useState, useEffect } from 'react';

export default function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => setUser(data));
  }, []);

  return <div>{user?.name}</div>;
}
</syntaxhighlight>

'''注意'''：需处理加载状态和错误。

=== 3. API路由（API Routes） ===  
Next.js允许创建服务端API端点作为代理，隐藏第三方API密钥或处理复杂逻辑。

==== 示例：代理端点 ====  
<syntaxhighlight lang="javascript">
// pages/api/proxy.js
export default async function handler(req, res) {
  const apiRes = await fetch('https://external-api.com/data', {
    headers: { 'Authorization': process.env.API_KEY }
  });
  const data = await apiRes.json();
  res.status(200).json(data);
}
</syntaxhighlight>

客户端调用：  
<syntaxhighlight lang="javascript">
fetch('/api/proxy').then(...);
</syntaxhighlight>

== 实际案例 ==  

=== 案例1：天气预报应用 ===  
集成天气API（如OpenWeatherMap），使用`getServerSideProps`实时获取数据：  
<syntaxhighlight lang="javascript">
export async function getServerSideProps({ query }) {
  const { city } = query;
  const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${process.env.WEATHER_KEY}`);
  return { props: { weather: await res.json() } };
}
</syntaxhighlight>

=== 案例2：电商产品列表 ===  
使用ISR（增量静态再生）定期更新产品数据：  
<syntaxhighlight lang="javascript">
export async function getStaticProps() {
  const res = await fetch('https://fakestoreapi.com/products');
  return {
    props: { products: await res.json() },
    revalidate: 3600, // 每小时更新
  };
}
</syntaxhighlight>

== 高级技巧 ==  

=== 错误处理 ===  
始终捕获API请求错误：  
<syntaxhighlight lang="javascript">
async function fetchData() {
  try {
    const res = await fetch('https://api.example.com/data');
    if (!res.ok) throw new Error('Failed to fetch');
    return res.json();
  } catch (error) {
    console.error(error);
    return { error: error.message };
  }
}
</syntaxhighlight>

=== 性能优化 ===  
* 使用`SWR`缓存数据：  
<syntaxhighlight lang="javascript">
import useSWR from 'swr';

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);
  // 自动处理缓存和重新验证
}
</syntaxhighlight>

* 批量请求减少网络延迟。

== 架构图 ==  
<mermaid>
graph LR
  A[Next.js App] -->|1. 请求| B[External API]
  B -->|2. 响应JSON| A
  A -->|3. 渲染| C[Client Browser]
</mermaid>

== 数学表达 ==  
API请求延迟对性能的影响：  
<math>
T_{total} = T_{network} + T_{process}
</math>  
其中<math>T_{network}</math>为网络延迟，<math>T_{process}</math>为数据处理时间。

== 总结 ==  
Next.js外部API集成灵活且强大，开发者需根据场景选择服务端或客户端获取，并注意错误处理和性能优化。实际项目中，结合缓存策略和增量静态再生可显著提升用户体验。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js数据获取]]