fetch api 在 Next js 中不起作用。给出错误

Question

NEXT.js

const API_KEY = process.env.API_KEY

import React from 'react'

const Home = async({searchParams}) => {
  const genre = searchParams.genre || 'fetchTrending';
  const apiUrl = `https://api.themovie.org/3/movie/top_rated$?api_key=${API_KEY}&language=en-US&page=1`;

try {
  const res = await fetch(apiUrl);

  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }

  const data = await res.json();
  const results = data.results;
  console.log(results);
} catch (error) {
  console.error('Error fetching data:');
}

  return (
    <div>Home</div>
  )
}

export default Home

上面的代码给出了服务器错误：获取数据时出错

我在postman上尝试了api，它有效。这里有什么问题吗？

Answer 1

我认为它是你的环境变量，接下来你必须在客户端使用 NEXT_PUBLIC_ 前缀所有你想要的环境变量

因此您应该将所有引用从 API_KEY 更改为 NEXT_PUBLIC_API_KEY。

如果不是这种情况，可能值得包括完整的错误响应，而不仅仅是 console.error('Error fetching data:');像这样：

console.error(error.response);