Tengo el archivo .env.local en la raíz del proyecto. Con la dirección a google sheets y el numero de celular para checkout a whatsapp.
API_URL=https://docs.google.com/spreadsheets/asdfadfasdf
NUMBER=1231234
Para la api de google sheets process.env funciona perfecto
export default {
list: (): Promise<Product[]> => {
return axios
.get(`${process.env.API_URL}`, {
responseType: "blob",
})
.then(
(response) =>
new Promise<Product[]>((resolve, reject) => {
Papa.parse(response.data, {
header: true,
complete: (results) => {
const products = results.data as Product[];
return resolve(
products.map((product) => ({
...product,
price: Number(product.price),
}))
);
},
error: (error) => reject(error.message),
});
})
);
},
};
Sin embargo, al querer pasar el numero de whatsapp, no me estaría funcionando. Si hardcodeo el numero si funciona, pero no con variables de entorno.
const SendButton: React.FC<Props> = ({ text, totalPrice, totalItems }) => {
return (
<Flex
alignItems="center"
justifyContent="center"
position="sticky"
as={motion.div}
>
<Button
isExternal
as={Link}
colorScheme="whatsapp"
width="fit-content"
href={`https://wa.me/${process.env.NUMBER}?text=${encodeURIComponent(text)}`}
leftIcon={
<Image src="https://icongr.am/fontawesome/whatsapp.svg?size=32&color=ffffff" alt='' />
}
>
{totalItems} items ({totalPrice})
</Button>
</Flex>
)
}
Sabrían por qué sucede esto? Soy nuevo y quizás me estoy pasando por alto algo
Actualización: Entiendo que necesito usar NEXT_PUBLIC para que me aparezca del lado del cliente, en este caso sí me dejaría usar el numero. Pero esto no traería problemas de seguridad? Al dejarla publica se podría exponer mi número en el código?