React.js : Pourquoi l'accès à ma clé API à partir d'un fichier .env nécessite-t-il le préfixe REACT_APP lors de son utilisation ? c'est à dire. (process.env.REACT_APP_API_KEY)

Question

D'après ma compréhension, le fichier .env doit contenir la clé API avec le préfixe REACT_APP suivi de son nom et pour utiliser la variable, nous devons omettre le préfixe REACT_APP mais j'ai remarqué que dans certains cas, il y a une différence de comportement de.

J'ai défini la variable d'environnement dans le fichier .env comme ceci : REACT_APP_YOUR_KEY_NAME=9999999999999. Et en supposant qu'il soit accessible via process.env.YOUR_KEY_NAME. Mais j'ai remarqué que dans certains cas (pas uniquement), un préfixe est requis, sinon la clé semble être undefined. Cela ne fonctionne donc que si j'utilise process.env.REACT_APP_YOUR_KEY_NAME

const FetchData= async () =>
  essayer {
    const cache = localStorage.getItem('apiData');
    si (cache) {
      retourner JSON.parse(cache);
    } autre {
      const réponse = wait fetch(`${url}?key=${process.env.REACT_APP_API_KEY}`);
      const jsonData = attendre réponse.json();
      localStorage.setItem('gameData', JSON.stringify(jsonData));
      renvoyer jsonData ;
    }
  } attraper (erreur) {
    console.error('Une erreur s'est produite :', erreur);
    renvoie null ;
  }
} ;

exporter les FetchData par défaut;

Answer 1

Pour toutes les variables d'environnement personnalisées dans l'application créée via create-react-app, nous devons utiliser le préfixe REACT_APP_ dans le nom de la variable d'environnement, c'est une exigence, si nous ne suivons pas la convention, la variable ne sera pas accessible, ça y est, tout comme VITE, vous devez combiner VITE_.. ou Nextjs avec NEXT_PUBLIC... (composants clients uniquement)

N'oubliez pas non plus que toutes les valeurs sont accessibles sur le client (navigateur). Vous ne devez pas l'utiliser pour des données/informations d'identification auxquelles vos utilisateurs ne devraient pas avoir accès dans le navigateur ni pour des clés API super secrètes.

Pour une sécurité maximale, il doit être utilisé sur le backend et aucun préfixe n'est requis sur le backend.

Pour plus de détails vous pouvez consulter (à nouveau) l'ancienne documentation à l'ARC https://create-react-app.dev/docs/adding-Variables d'environnement personnalisées