Tengo un problema cuando trato de obtener datos a través de mi archivo env. Aparece el mensaje de error "Error al cargar el recurso: el servidor respondió con un estado de 401 ()" mensaje de error

 :{ "status_code": 7, "status_message": "Invalid API key: You must be granted a valid key.", "success": false }

pero cuando busco datos sin usar el archivo env.local y uso mi clave api directamente en la variable const, todo funciona bien. Pero quiero hacer que la llamada al archivo local env funcione.

Mi archivo env.local

 API_KEY=3retkjdkfgjfd95659 (MADE IT UP FOR THE POST)

Mi carpeta de utilidades /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`, },}

Mi archivo axios

 const instance = axios.create({ baseURL: "https://api.themoviedb.org/3/", }); export default instance;

archivo de pancarta

 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(); }, []);