Así que tengo un proyecto que tiene 4 claves de API que necesito ocultar:
STORYBLOK_API_KEY= EMAILJS_SERVICE_ID= EMAILJS_USER_ID= EMAILJS_TEMPLATE_ID= Los 4 los estoy usando con process.env.XXX , lo curioso es que la clave storyblok está funcionando (pero no se usa dentro de un componente), sin embargo, los otros 3 los estoy usando dentro de una función de envío de formulario:
const sendContactForm = async (formData) => { const data = { service_id: process.env.EMAILJS_SERVICE_ID, template_id: process.env.EMAILJS_TEMPLATE_ID, user_id: process.env.EMAILJS_USER_ID, template_params: { ...formData, form: "Discover form" }, }; try { const response = await axios.post("https://api.emailjs.com/api/v1.0/email/send", data); console.log(response); } catch (e) { console.log(e); } };Y no están trabajando aquí, están indefinidos. Yo he tratado:
Los 3 enfoques no funcionaron.
¿Leíste la documentación exactamente? ¿Cómo podemos agregar Environment Variables en Next.js? A continuación tiene un ejemplo simple de docs.
.env.local
DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword Esto carga process.env.DB_HOST , process.env.DB_USER y process.env.DB_PASS en el entorno de Node.js automáticamente, lo que le permite usarlos en los métodos de obtención de datos y rutas API de Next.js
ejemplo:
// pages/index.js export async function getStaticProps() { const db = await myDB.connect({ host: process.env.DB_HOST, username: process.env.DB_USER, password: process.env.DB_PASS, }) // ... } Environment variables solo están disponibles en el Node.js (del lado del servidor), lo que significa que no estarán expuestas al navegador. Para exponer una variable al navegador (lado del cliente), debe prefijar la variable con NEXT_PUBLIC_. Por ejemplo:
NEXT_PUBLIC_ANALYTICS_ID=123456xyzabcdeAquí tiene todos los ejemplos del uso de variables de entorno en Next.js. Buena suerte ;-)