跳到主要内容

Next.js 外部 API 集成

介绍​

在现代 Web 开发中，与外部 API 集成是构建动态和交互式应用程序的关键部分。Next.js 提供了多种数据获取方法，使得与外部 API 的集成变得简单而高效。本文将逐步讲解如何在 Next.js 中集成外部 API，并通过实际案例展示其应用场景。

数据获取方法​

Next.js 提供了三种主要的数据获取方法：

  1. 静态生成（Static Generation）：在构建时获取数据并生成静态页面。
  2. 服务器端渲染（Server-side Rendering）：在每次请求时获取数据并生成页面。
  3. 客户端渲染（Client-side Rendering）：在客户端获取数据并动态更新页面。

静态生成（Static Generation）​

静态生成适用于数据不经常变化的页面。以下是一个使用 getStaticProps 获取数据的示例：

javascript
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Data from API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

服务器端渲染（Server-side Rendering）​

服务器端渲染适用于需要频繁更新的数据。以下是一个使用 getServerSideProps 获取数据的示例：

javascript
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Data from API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

客户端渲染（Client-side Rendering）​

客户端渲染适用于需要在用户交互时动态获取数据的场景。以下是一个使用 useEffect 钩子获取数据的示例：

javascript
import { useEffect, useState } from 'react';

export default function Home() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      <h1>Data from API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

实际案例​

假设我们正在构建一个天气应用程序，需要从外部 API 获取天气数据并显示在页面上。我们可以使用 getServerSideProps 来获取数据：

javascript
export async function getServerSideProps() {
  const res = await fetch('https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=London');
  const data = await res.json();

  return {
    props: {
      weather: data,
    },
  };
}

export default function Weather({ weather }) {
  return (
    <div>
      <h1>Current Weather in London</h1>
      <p>Temperature: {weather.current.temp_c}°C</p>
      <p>Condition: {weather.current.condition.text}</p>
    </div>
  );
}

总结​

通过本文，我们学习了如何在 Next.js 中集成外部 API，并掌握了静态生成、服务器端渲染和客户端渲染三种数据获取方法。我们还通过一个实际案例展示了如何从天气 API 获取数据并显示在页面上。

附加资源​

练习​

  1. 尝试使用 getStaticProps 从不同的 API 获取数据并生成静态页面。
  2. 使用 useEffect 钩子实现一个简单的搜索功能，根据用户输入动态获取数据并更新页面。
提示

在开发过程中，确保妥善处理 API 密钥等敏感信息，避免将其直接暴露在客户端代码中。