如何在next/API中使用第三方API

Question

我是NEXTJS的新手，正在创建一个天气应用程序。我使用的是openweather api，但如何在next/api中使用它。我曾尝试在next/api中创建一个文件today.js，并以这种方式编写代码，但我无法在控制台中获取数据？

today.js

const apikey = process.env.REACT_APP_API_KEY_1;
const url = `https://api.openweathermap.org/data/2.5/weather?q=Bhopal&appid=${apikey}`;
const fecthInfo = async() => {
const response = await fetch(url);
const data = await response.json() ;
return data;
}
export default function handler(req, res) {
const result = fecthInfo();
console.log(result)
res.status(200).json(result)
}

你能说出我正在做的错误吗？或者我必须在任何组件中简单地使用fetch方法，比如在reactJS中。

Answer 1

而不是从api路由内的远程api获取数据。我建议直接在路由页面中使用getServerSideProps((，这样只需获取一次数据。

您可以通过道具将请求的数据传递给测试组件。

const Test= function({data}){
console.log(data)
return <div></div>
}

export default async function 
getServerSideProps(){
const response = await fetch(url);
const data = await response.json();
return {
props:{data}
}
}
export default Test; 

Answer 2

看起来缺少一个async/await。这应该有效：

const apikey = process.env.REACT_APP_API_KEY_1;
const url = `https://api.openweathermap.org/data/2.5/weather?q=Bhopal&appid=${apikey}`;
const fetchInfo = async() => {
const response = await fetch(url);
const data = await response.json();
return data;
};
export default async function handler(req, res) {
const result = await fetchInfo();
console.log(result);
res.status(200).json(result);
}