Summary  
This chapter covers how to import and apply a global CSS file in the root layout component to enforce consistent styles across an entire application.

General domain of usage  
Front-end web development (UI styling)

Los archivos CSS globales suelen incluir elementos como el diseño, la tipografía y otros patrones de diseño consistentes en las diferentes partes de la aplicación.

Si navegas a la carpeta `app/ui`, encontrarás un archivo llamado `global.css`. Este archivo te permite aplicar reglas CSS a todas las rutas de tu aplicación. Aunque puedes incluir `global.css` en cualquier componente, se recomienda incluirlo en el layout raíz (`app/layout.tsx`), que es el componente principal de la aplicación.

Agreguemos los estilos globales a la aplicación. Ve a `app/layout.tsx` e importa el archivo `global.css`.

Después de incorporar los estilos globales, deberías ver la siguiente vista si el servidor de desarrollo local sigue en ejecución: <a href="http://localhost:3000/" 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'" >http://localhost:3000/</a>

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.

Agregar el Archivo CSS Global

En la práctica

Agregar el Archivo CSS Global

En la práctica