Next.js调用API无法展示数据问题求助

1. 先排查API本身与跨域问题 #

直接在浏览器地址栏打开https://saurav.tech/NewsAPI/top-headlines/category/technology/us.json，确认是否能返回正常JSON数据：

• 如果浏览器里无法打开：说明API可能失效或被网络限制，换网络环境重试
• 如果浏览器能打开但组件里报错：大概率是CORS跨域问题，用Next.js的API路由做代理：
  在pages/api/news.js创建代理文件：

  export default async function handler(req, res) {
    try {
      const response = await fetch('https://saurav.tech/NewsAPI/top-headlines/category/technology/us.json');
      const data = await response.json();
      res.status(200).json(data);
    } catch (error) {
      res.status(500).json({ error: '获取新闻失败' });
    }
  }
  

  组件里调用/api/news代替原API地址即可绕过跨域限制

2. 检查组件数据获取逻辑 #

根据你的Next.js版本（Pages Router/App Router）选择对应写法：

客户端组件（带'use client'指令） #

用useEffect处理异步请求：

'use client';
import { useEffect, useState } from 'react';

export default function Widgets() {
  const [newsList, setNewsList] = useState([]);
  const [errMsg, setErrMsg] = useState('');

  useEffect(() => {
    const fetchNews = async () => {
      try {
        const res = await fetch('/api/news');
        if (!res.ok) throw new Error('请求异常');
        const data = await res.json();
        // 注意API返回结构是{ articles: [...] }，要取数组部分
        setNewsList(data.articles || []);
      } catch (err) {
        setErrMsg(err.message);
      }
    };
    fetchNews();
  }, []);

  if (errMsg) return <div>错误：{errMsg}</div>;
  if (!newsList.length) return <div>加载中...</div>;

  return (
    <div className="news-widget">
      {newsList.map(item => (
        <div key={item.url} className="news-item">
          <h3>{item.title}</h3>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}

服务端组件（无需客户端指令） #

直接在组件内异步获取数据（App Router默认支持）：

export default async function Widgets() {
  try {
    const res = await fetch('https://saurav.tech/NewsAPI/top-headlines/category/technology/us.json', {
      next: { revalidate: 600 } // 10分钟缓存，减少API请求
    });
    if (!res.ok) throw new Error('API请求失败');
    const data = await res.json();
    const articles = data.articles || [];

    return (
      <div className="news-widget">
        {articles.map(item => (
          <div key={item.url} className="news-item">
            <h3>{item.title}</h3>
            <p>{item.description}</p>
          </div>
        ))}
      </div>
    );
  } catch (err) {
    return <div>加载新闻失败：{err.message}</div>;
  }
}

3. 快速定位错误的调试步骤 #

• 打开浏览器控制台（F12），看Network标签：检查API请求的状态码（404/500/跨域错误）
• 查看Console标签：是否有语法错误、未捕获的Promise异常
• 打印API返回数据：在fetch成功后加console.log(data)，确认是否正确读取了articles数组

4. 其他可能的问题 #

• 网络环境：代理、防火墙可能阻止了API请求，切换网络重试
• API限流：公开API可能有请求频率限制，暂停一段时间再试

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