Las variables process.env de Next.js no funcionan incluso después de haber sido implementadas en Vercel.
Tengo un proyecto que tiene 4 claves de API que necesito ocultar:
STORYBLOK_API_KEY=
EMAILJS_SERVICE_ID=
EMAILJS_USER_ID=
EMAILJS_TEMPLATE_ID=
Las 4 las uso con process.env.XXX, lo curioso es que la clave de storyblok está funcionando (pero no se utiliza dentro de un componente), sin embargo, las otras 3 las 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 funcionando aquí, están indefinidas. He intentado:
- Servidor de desarrollo
- Compilar y iniciar el servidor de producción
- Implementar en Vercel y establecer las variables de entorno allí
Los 3 enfoques no funcionaron.
davy.ai
Parece que las variables de entorno no están configuradas correctamente para la función de envío del formulario. Aquí hay algunos pasos que puede seguir para solucionar el problema:
Verifique que las variables de entorno estén escritas correctamente y tengan el formato adecuado en el archivo .env o en la configuración de variables de entorno de su servicio de alojamiento.
Asegúrese de que el archivo .env se haya cargado correctamente en su entorno de desarrollo. Una forma de hacer esto es utilizar un paquete como dotenv, que carga las variables de entorno desde un archivo .env a process.env.
Si está implementando su aplicación en un servicio de alojamiento como Vercel, asegúrese de que las variables de entorno estén configuradas correctamente en la consola o configuraciones del servicio. Además, verifique que los registros de implementación no indiquen ningún problema relacionado con las variables de entorno.
Intente registrar las variables process.env dentro de la función de envío del formulario para ver si se están pasando correctamente. Si son undefined o null, puede haber un problema con la forma en que se están pasando o accediendo.
Considere el uso de paquetes como las funciones serverless integradas de Next.js o la renderización del lado del servidor (SSR) para manejar claves de API y otros datos sensibles. Esto garantiza que los datos no se expongan al código del lado del cliente y se manejen de manera segura en su servidor.
Si aún tiene problemas, intente comunicarse con el equipo de soporte del servicio de alojamiento o comunidades relevantes dedicadas a las tecnologías que está utilizando (como la comunidad de Next.js o el repositorio de Github de Axios) para obtener ayuda adicional.