Crear una factura - Paso a paso

1. Crear un formulario: Primero, se necesita un formulario para obtener los detalles. Aquí es donde el usuario ingresa la información para la nueva factura;
2. Utilizar una acción del servidor: Crear una acción especial en el servidor para manejar los datos del formulario. Cuando alguien completa el formulario, esta acción se activa;
3. Obtener los datos del formulario: Dentro de la acción del servidor, extraer la información del formulario. Es como desempacar una caja: se revisa el contenido;
4. Verificar y preparar los datos: Revisar los datos y asegurarse de que todo esté correcto. Es como comprobar que los ingredientes de una receta estén frescos y sean los adecuados. Una vez verificado, preparar los datos para insertarlos en la base de datos;
5. Insertar los datos: Guardar los datos en la base de datos;
6. Actualizar la caché y regresar a la página de facturas: Después de agregar los datos, actualizar la caché. Es como asegurarse de que todos tengan la información más reciente. Luego, redirigir al usuario a la página de facturas para que pueda ver la nueva factura creada.

Volver al proyecto

1. Crear un formulario

Cree una nueva carpeta llamada 'create' dentro del directorio app/dashboard/invoices. Cree un nuevo archivo llamado page.tsx dentro de esta carpeta. Este archivo servirá como una nueva página que permitirá a los usuarios generar una factura.

Copie y pegue el siguiente código en el archivo page.tsx:

La página utiliza un Server Component para recopilar información del usuario y luego la envía a un componente <Form> predefinido. A continuación se muestra un desglose del componente <Form>:

• Menú desplegable para usuarios;
• Campo de entrada para el monto;
• Botones de opción para el estado;
• Botón de envío para completar.

Si hace clic en el botón "Create Invoice", será dirigido a un formulario que le solicitará completar la información necesaria.

2. Usar una Server Action

1. Navegar al directorio lib;
2. Crear un nuevo archivo llamado actions.ts;
3. Agregar la directiva 'use server' en la parte superior;
   • ¿Por qué 'use server'? - Permite que las funciones sean versátiles y utilizables tanto en componentes Cliente como Servidor. Es una forma práctica de organizar las Server Actions, aunque también se pueden incluir directamente en los componentes de servidor si es necesario.
4. Creación de una función Server Action.

A continuación, dentro del componente <Form>, importar createInvoice desde el archivo actions.ts. Incluir un atributo action en el elemento <form> e invocar la acción createInvoice.

3. Obtener datos del formulario

Regresar a app/lib/actions.ts para extraer los valores de formData utilizando el método .get(name). Una vez completada esta tarea, se puede completar el formulario y revisar los datos ingresados en la consola del terminal.

Resultado:

4. Verificación y preparación de los datos

Antes de almacenar los datos del formulario en la base de datos, es fundamental comprobar que estén en el formato correcto y tengan los tipos adecuados. En nuestro curso, hemos estado utilizando un formato específico para los datos de la tabla de facturas.

Para facilitar este proceso, existen varias opciones para la validación de tipos. En lugar de comprobar los tipos manualmente, podemos utilizar Zod, una biblioteca de validación orientada a TypeScript. Es una herramienta útil que simplifica la tarea de validación.

Esto es lo que debemos hacer en el archivo actions.ts:

1. Importar Zod en el archivo actions.ts;
2. Crear un esquema utilizando Zod que coincida con la estructura del objeto del formulario. Este esquema actúa como un conjunto de reglas para asegurar que el formData sea correcto antes de guardarlo en la base de datos.

Luego, pasamos el rawFormData a CreateInvoice para validar los tipos.

Convertir el monto a centavos y crear una nueva fecha con el formato "YYYY-MM-DD" utilizando JavaScript puro.

5. Insertar datos

Ahora que se tienen todos los valores necesarios, se puede utilizar sql para enviarlos a la base de datos.

6. Actualizar caché y volver a facturas

Next.js dispone de una función útil llamada Client-side Router Cache. Esta mantiene un registro de las páginas visitadas por los usuarios durante un periodo determinado. Esta caché, combinada con la precarga, garantiza que los usuarios puedan cambiar entre diferentes páginas rápidamente sin sobrecargar el servidor con demasiadas solicitudes.

A continuación, se describe el procedimiento deseado:

1. Dado que se han actualizado los datos en la página de facturas, es necesario asegurar que los usuarios visualicen la información más reciente. Para ello, se limpia la caché utilizando la función revalidatePath. Esto garantiza que se envíe una solicitud nueva al servidor, obteniendo los datos más actuales;
2. Tras actualizar los datos y limpiar la caché, se debe redirigir al usuario de vuelta a la página de facturas de manera fluida. Esto se logra mediante la función redirect. Es equivalente a proporcionar indicaciones para regresar al punto anterior.

En la práctica