Next.js中Fetch API调用失败报错，请求排查问题原因

1. URL语法错误（核心问题） #

你的API URL里多了一个多余的$符号：

const apiUrl = `https://api.themovie.org/3/movie/top_rated$?api_key=${API_KEY}&language=en-US&page=1`;

应该改为：

const apiUrl = `https://api.themovie.org/3/movie/top_rated?api_key=${API_KEY}&language=en-US&page=1`;

这个$会导致请求路径无效，Postman里的URL没有该符号所以能正常请求，这是代码报错的主要原因。

2. Try/Catch块范围错误 #

当前fetch调用在try块外部，网络类错误无法被捕获。需要把fetch也包裹到try内部：

try {
  const res = await fetch(apiUrl);
  console.log(res)
  if (!res.ok) {
    throw new Error(`Failed to fetch data: ${res.status} ${res.statusText}`);
  }
  const data = await res.json();
  const results = data.results;
  console.log(results);
} catch (error) {
  console.error('Error fetching data:', error.message);
}

3. 错误处理的无效属性 #

fetch抛出的Error对象并没有response属性，你在catch里访问error.response会得到undefined。如果需要响应状态信息，应该在抛出错误时把响应的状态码和状态文本包含进去，如上一步代码所示。

4. 环境变量验证 #

确保API密钥在Next.js中正确配置：

• 若当前是服务器组件（Home是async组件，属于服务器组件），只需在项目根目录的.env.local文件中添加API_KEY=你的密钥，无需前缀。
• 若后续改为客户端组件，需要给变量加上NEXT_PUBLIC_前缀，即NEXT_PUBLIC_API_KEY=你的密钥，否则客户端无法读取该变量。

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