I have a problem when i try to fetch data through my env file i get an error “Failed to load resource: the server responded with a status of 401 ()”
but when i fetch data without using env.local file and use my api key directly in const variable everything works fine. But i want to make the env local file call to work.
My env.local file
API_KEY=3retkjdkfgjfd95659 (MADE IT UP FOR THE POST)
My utils folder /requests.js
const API_KEY = process.env.API_KEY;
//const API_KEY = "3retkjdkfgjfd95659" the code works only when i use this variable
const requests = {
fetchTopRated: {
title: "Top Rated",
url: `/movie/top_rated?api_key=${API_KEY}&language=en-US`,
},}
My axios file
const instance = axios.create({
baseURL: "https://api.themoviedb.org/3/",
});
export default instance;
Banner file
function Banner() {
const [movie, setMovie] = useState([]);
useEffect(() => {
async function fetchData() {
const request = await axios.get(requests.fetchTopRated.url);
setMovie(
request.data.results[
Math.floor(Math.random() * request.data.results.length - 1)
]
);
return request;
}
fetchData();
}, []);