Summary  
This chapter demonstrates how to implement an async page component that awaits fetched data, passes it as props to child components, and uses array mapping with conditional rendering to build a dynamic chart UI.  

General domain of usage  
Dashboard data visualization

Ahora centrémonos en la página del panel y veamos la teoría en acción para comprender mejor el concepto.

## Volver al proyecto
Copie y pegue el siguiente código en `app/dashboard/page.tsx`. Tómese un momento para explorar la interfaz de usuario, pero tenga en cuenta que no hay datos presentes, por lo que la página en vivo no mostrará ningún cambio.

 ### Recuperación de datos para IncomeChart
Para obtener los datos de ingresos, importa la función `fetchIncome` desde el módulo `'@/app/lib/data'` y llámala dentro del componente `Page`. Luego, descomenta el componente `IncomeChart` y revisa la página en vivo.


A continuación, sigue estos pasos para visualizar el gráfico de ingresos:
1. Visita el archivo `app/ui/dashboard/income-chart.tsx`.
2. Descomenta el código de la interfaz de usuario listo para usar.

Esto da como resultado el siguiente gráfico de ingresos en la página en vivo.

Aprende a construir aplicaciones web modernas y de alto rendimiento utilizando Next.js. Configura proyectos con estructuras organizadas, estilos y enrutamiento para una navegación fluida. Obtén y muestra datos de manera eficiente mientras optimizas el renderizado y el rendimiento. Implementa funciones avanzadas como paginación, operaciones CRUD y búsqueda global para aplicaciones web dinámicas. Despliega tus proyectos de Next.js, conéctalos con bases de datos y añade autenticación para proteger los datos de los usuarios.

Analizaremos los conocimientos previos necesarios antes de comenzar con el framework Next.js, lo que puede esperar de este curso y los proyectos que desarrollará.

Configuraremos el proyecto, examinaremos formas de agregar estilos a nuestra aplicación y abordaremos aspectos visuales como imágenes, fuentes, páginas y diseños.

Aprenda a crear y gestionar fácilmente una nueva vista para su aplicación y a navegar por todas las páginas de manera fluida con un sistema de enrutamiento incorporado.

Despliegue de la aplicación Next.js utilizando cuentas de GitHub y Vercel. Además, establecimiento de una base de datos para proporcionar los datos necesarios a la aplicación.

Considere cómo obtener y mostrar datos al usuario de manera clara y eficiente.

Descubra cómo implementar características web modernas como paginación, operaciones CRUD, búsqueda global, validación de formularios y más.

Implementación de autenticación en Next.js.

Trabajando con la Página del Panel

Volver al proyecto

Recuperación de datos para IncomeChart

En la práctica

Awesome!

Trabajando con la Página del Panel

Volver al proyecto

Recuperación de datos para IncomeChart

En la práctica