Conceptos básicos de Next.js 14
¿Qué es Next.js y por qué aprenderlo si quieres ser frontend senior?
Arquitectura de un proyecto de Next.js
Herramientas y stack utilizado en el curso
Cómo crear rutas en Next.js
Cómo crear Layout en Next.js
Cómo funciona la navegación en Next.js
Manejo de parámetros en rutas en Next.js
React Server Components en Next.js: notación "use Client"
Creación de arquitectura de landing page en Next.js
Quiz: Conceptos básicos de Next.js 14
Manejo de estilos y estáticos en Next.js 14
CSS Modules en Next.js 13
Uso de Sass en Next.js
Cómo utilizar estilos globales en Next.js
Cómo agregar archivos estáticos en Next.js
Manejo y optimización de imágenes con Next Image
Optimización del componente image en Next.js
Optimización de fuentes con Next.js
Creando estilos dinámicos aplicando condicionales en Next.js
Quiz: Manejo de estilos y estáticos en Next.js 14
Data Fetching en Next.js
Creación de tienda de Shopify para un proyecto en Next.js
Manejo de variables de entorno en Next.js
Cómo obtener información de una API con Next.js
Manejo de estado de carga con el archivo loading.tsx
Route Grouping en Next.js
Manejo de errores en la UI con el archivo error.tsx
Quiz: Data Fetching en Next.js
Next.js Avanzado
Implementando páginas de Not Found y error global
Cómo impactan los React Server Components en un proyecto en Next.js
Cuándo utilizar layout o template en Next.js
Arquitectura profesional para data fetching en un proyecto en Next.js
Next.js para backend: manejando rutas con archivos Route Handlers
Proyecto: implementando la página de tienda
Patrones de data fetching en Next.js
Proyecto: filtrando categorías de productos
Data fetching de parámetros en el servidor y cliente
Proyecto: página de producto y arreglos en el sitio
Cómo funciona el Fetch y el Caché de Next.js
Revalidando cache con revalidateTag y revalidatePath en Next.js
Cómo hacer redirects en Next.js
Proyecto: HTML dinámico en la descripción del producto
Mejorando SEO de una página en Next.js
Quiz: Next.js Avanzado
Autenticación y autorización
Manejando autenticación y autorización con Storefront APÏ de Shopify
Server Actions en Next.js
Proyecto: proceso de Sign-Up con GraphQL
Manejo de cookies para colocar un token de acceso de un proyecto en Next.js
Cómo implementar un flujo de login en un proyecto en Next.js
Validando token de acceso de usuario en un proyecto en Next.js
Proyecto: implementando el carrito de compras
Manejo de estado global con zustand en Next.js
Proyecto: agregando items al carrito de compras
Cómo integrar el checkout de Shopify a un proyecto en Next.js
Implementar middleware en proyecto en Next.js para protección de rutas
Inteligencia Artificial
Creando componente de chatbot de ventas con la SDK IA de Vercel
Implementación de un bot de ventas en una app Next.js
Performance
Optimización de carga con parallel routing en Next.js
Análisis de bundle para Next.js 14
Quiz: Performance
Frontend Ops
Edge runtime
Despliegue de un proyecto Next.js en Vercel
Mejores prácticas en arquitecturas empresariales
Quiz: Frontend Ops
Next.js es parte de tu nuevo stack
¡Has creado un proyecto en Next.js!
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Cómo crear Layout en Next.js
5/57Aportes 8
Preguntas 2
will appear on the whole app \*/} \
My app\
{children} \ \</body> \</html> ) } Note that the layout receives a `children` parameter. This `children` is, in fact, the `page.tsx` file within the folder where we are working. \-- \*\*app/\*\*📂 \-- layout.tsx <- Acts as the father of page.tsx \-- page.tsx <- Acts as the child of layout.tsx \-- \*\*app/example\*\*📂 \-- page.tsx <- Still actting as the child of layout.tsx \-- \*\*app/example2\*\*📂 \-- layout.tsx <- It only alters the page.tsx within this folder \-- page.tsx It’s essential to understand that the `page.tsx` in the `app` folder doesn’t alter the `page.tsx` in the `app/example` folder in any way. Only the `layout.tsx` holds this role. This structure ensures a clean separation of concerns, allowing for a hierarchical relationship where the layout serves as the overarching structure, and individual pages or sections can customize their content without affecting the layout of the entire application.
CLASE5 Resumen 28/02/2024
Los archivos especiales layout, pages y templates permiten crear un UI para una ruta.
LAYOUT
Un Layout es un UI que es compartido entre multiples rutas, pueden preserva su estado, seguir siendo interactivos y no se vuelven a re-renderizar. Recordar que cuando usamos layout es obligatorio aceptar la prop “children” para que pueda ser compartida con otros componentes.
Por ejemplo, el layout sera compartido con /dashboard y /dashboard/settings pages.
ROOT LAYOUT
Es todo aquello que siempre va a estar presente en la aplicacion y sin importar que cambies de pagina se va a visualizar como por ejemplo el header, el footer, alguna barra de navegación específica y suele haber diferentes tipos de layout para cada parte de la aplicación. Por lo general se ubica en el folder /app y solo él puede contener etiquetas <html> y <body>.
No es posible pasar datos entre un layout padre y sus hijos. Sin embargo, puedes obtener los mismos datos en una ruta más de una vez, y React deducirá automáticamente las solicitudes sin afectar al rendimiento.
LOCAL LAYOUT o NESTING LAYOUTS
Este puede ir ubicado dentro de cada segmento de ruta que vayamos anidando reflejando un comportamiento del root layout pero respetando los niveles jerarquicos de los layouts superiores.
PAGES
Una “PAGE.TSX” es un UI que es unico en una ruta y puede existir en cada folder, ademas pueden hacer fetch a la data del lado del servidor dado que por defecto son server components.
TEMPLATES
Muy similar a los layouts en la forma que envuelven a los layout hijos o las pages.
A diferencia de los layouts que persiten en las rutas y mantienen estados, los templates crean una nueva instancia para cada uno de sus hijos en la navegación, en otras palabras cuando navegas entre templates se monta la nueva instancia del componente, se recrea los elementos del DOM, no guarda estados y se vuelven a sincronizar sus efectos.
- Casos de uso:
- Caracteristicas que usen useEffect (logging pages) y useState (pagina de formularios de comentarios)
El Template component debe incluir el children prop.
<Layout>
{/* Note that the template is given a unique key. */}
<Template key={routeParam}>{children}</Template>
</Layout>
METADATA
En el app directory, existe el archivo “page” en el que puedes modificar elementos del tag “head” como title y meta usando los metadata apis.
La metada puede ser definida exportando el objeto “metadata” o la funcion generateMetadata en un archivo layout o page.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?