please enter this link to see the image of the error I got the ((Server Error TypeError: fetch failed)) when I was trying to use themoviedb api. this is my index.js file. I have checked everything for many times from scratch. But I get this error every time I run my app. For more information: I am cloning hulu website with the help of a video tutorial.
import Head from 'next/head'
import Header from '../components/Header'
import Navbar from '../components/Navbar'
import Results from '../components/Results'
import requests from '../utils/requests'
export default function Home(props) {
console.log(props);
return (
<div>
<Head>
<title>movie-website</title>
<meta name="description" content="movie website" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Header />
<Navbar />
<Results />
</div>
)
}
export async function getServerSideProps(context) {
const genre = context.query.genre;
const request = await fetch(
`https://api.themoviedb.org/3${requests[genre]?.url || requests.fetchTrending.url
}`
).then((res) => res.json());
return {
props: {
results: request.results,
},
};
}
this is my request.js file:
const API_KEY = process.env.API_KEY;
const requests = {
fetchTrending: {
title: "Trending",
url: `/trending/all/week?api_key=${API_KEY}&language=en-US`
},
fetchTopRated: {
title: "Top Rated",
url: `/movie/top_rated?api_key=${API_KEY}&language=en-US`
},
fetchActionMovies: {
title: "Action",
url: `/discover/movie?api_key=${API_KEY}&with_genres=28`
},
fetchComedyMovies: {
title: "Comedy",
url: `/discover/movie?api_key=${API_KEY}&with_genres=35`
},
fetchHorrorMovies: {
title: "Horror",
url: `/discover/movie?api_key=${API_KEY}&with_genres=27`
},
fetchRomanceMovies: {
title: "Romance",
url: `/discover/movie?api_key=${API_KEY}&with_genres=10749`
},
fetchMystery: {
title: "Mystery",
url: `/discover/movie?api_key=${API_KEY}&with_genres=9648`
},
}
export default requests;
I also have a file named .env.local which I keep my API_KEY in it.