Tengo un proyecto en NextJs y estoy haciendo un formulario de alta de un empleado. Estoy usando react-hook-form
y axios
.
Mi archivo page.tsx
:
'use client'
import { useForm } from 'react-hook-form'
import { createEmployee } from '@/services/employees'
function NewEmployee() {
const {
register,
handleSubmit,
formState: { errors, isSubmitting }
} = useForm()
const onSubmit = async (employee) => {
await createEmployee(employee)
}
return (
<form onSubmit={handleSubmit(onSubmit)} className='space-y-8'>
...................
</form>
)
}
export default NewEmployee
Y mi servicio para crear el empleado es el siguiente:
import axios from 'axios'
const { API_URL } = process.env
export const createEmployee = async (employee: Employee) => {
console.log(`la url es: ${API_URL}/employees`)
try {
await axios.post(`${API_URL}/employees`, employee)
} catch (error) {
console.error('Error:', error)
throw error
}
}
API_URL=http://localhost:3001/local
--> ese es la url de mi api y mi aplicacion de front corre en el puerto 3000.
El resultado del log de mi funcion es --> la url es: undefined/employees
No me esta tomando esa variable de entorno. En más, la consulta la esta haciendo aquí --> http://localhost:3000/employees/undefined/employees
¿Cuál puede ser el problema o error?