Estoy tratando de pasar una variable de entorno al front-end para mostrar un mapa de MapBox.
//.env.local MAPBOX_KEY="abc123" // components/MapBox.js export default function MapBox(){ const MAPBOX_TOKEN = process.env.MAPBOX_KEY return ( <MapGL mapboxApiAccessToken={MAPBOX_TOKEN} /> ) }El código anterior no parece reconocer la CLAVE API.
yarn dev¿Hay alguna manera de cargar este env al front-end?
Nota: estoy usando el paquete react-map-gl construido sobre MapBox
Debe anteponerlo con NEXT_PUBLIC_
Solo las variables con ese prefijo estarán expuestas en la interfaz
Por ejemplo, NEXT_PUBLIC_HEY será visible para el frontend pero ambos para el backend.
MAPBOX_KEY="abc123" NEXT_PUBLIC_HEY="FRONT"// Normal Env VERY_SECRET // PUBLIC ENV NEXT_PUBLIC_NOT_SO_SECRETAñadir NEXT_PUBLIC_ PREFIX
Tienes que prefijar tu ENV con NEXT_PUBLIC_ en .env.local
//.env.local NEXT_PUBLIC_MAPBOX_KEY="abc123"En su componente, haga referencia a él de esta manera:
// MapBox.js export default function MapBox(){ const MAPBOX_TOKEN = process.env.NEXT_PUBLIC_MAPBOX_KEY return ( <MapGL mapboxApiAccessToken={MAPBOX_TOKEN} /> ) }