Soy nuevo en NEXTJS y estoy creando una aplicación meteorológica. Estoy usando una API de openweather api pero ¿cómo puedo usarla dentro de next/api ? Intenté crear un archivo today.js dentro de next/api y escribí el código de esta manera, pero no puedo obtener datos en la consola.
hoy.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) } ¿Puede decir el error que estoy cometiendo, o simplemente tengo que usar el método de fetch en cualquier componente como en reactJS?
Parece que te falta un async/await. Esto debería funcionar:
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); }En lugar de obtener datos de una API remota dentro de la ruta API. Sugiero usar getServerSideProps() en la página de ruta directamente para que tenga que buscar los datos solo una vez.
Pasa los datos solicitados a través de accesorios al componente de prueba.
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;