Summary
This chapter demonstrates how to create a reusable layout component that composes shared UI elements (such as a side navigation) and renders nested content via a children prop, leveraging framework conventions for route-level layouts.

General domain of usage
Web application dashboards

Diseño de un layout para toda la aplicación. En este caso, se creará un componente que facilita la navegación entre las páginas de la aplicación y también proporciona la opción de cerrar sesión (más información sobre autorización en los próximos capítulos).

## Volver al proyecto
Ahora, generación de un `layout.tsx` para el dashboard. Dentro de la carpeta `/dashboard`, creación de un nuevo archivo llamado `layout.tsx` e inserción del siguiente código:

En este código, se realizan algunas acciones clave. Análisis detallado:
- Inclusión del componente `<SideNav />` como parte del layout. Cualquier componente importado aquí pasa a formar parte del diseño general de la página;
- El componente `<Layout />` posee una prop `children`. Este "hijo" puede ser una página o bien otro layout. Específicamente, las páginas ubicadas en `/dashboard` se insertarán automáticamente dentro de `<Layout />`.


Ahora, intenta seguir el enlace <a href="http://localhost:3000/dashboard" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" ><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> http://localhost:3000/dashboard</a> y navega entre la página del panel y la página de facturas.

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.

Creación de un Componente de Diseño Común

Volver al proyecto

Awesome!

Creación de un Componente de Diseño Común

Volver al proyecto