Optimización de carga con parallel routing en Next.js

Curso de Next.js 14

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,

Recursos

Aportes 8

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Juan David Murillo Giraldo

hace 4 meses

Gran clase! ¿Qué diferencia usar parallel routing de utilizar suspense? Gracias!

Luis Rodrigo Mendoza Bedon

hace 8 meses

Esto me ayuda mucho en mi ecommerce, creo que le podemos agregar un skeleton template para agregarle a loader y ver que componentes tendrian que cargar.

Jorge Morales

hace 3 meses

# Parallel Routes Parallel Routes allows you to simultaneously or conditionally render one or more pages within the same layout. They are useful for highly dynamic sections of an app, such as dashboards and feeds on social sites.

yavallejo

hace 8 meses

Muy interesante este enfoque, a colocarlo en practica!!!!

Juan Felipe Gutiérrez

hace 2 meses

por si les pasa igual que a mi, aunque fue un descuido de mi parte. Es importante que el nombre de las carpetas de los parallel routes tenga las mismas mayusculas y minusculas

Neddy Ksenia Gonzalez Siles

hace 2 meses

Cuando usar services vs. server actions? Porque el resto de la communicacion con graphQL lo hicimos con server actions

Jorge Morales

hace 3 meses

### Profesionalizando la arquitectura de un proyecto Next.js: `service/` y `config/` Para estructurar un proyecto Next.js de forma profesional, se recomienda seguir las convenciones establecidas y aprovechar las carpetas `service/` y `config/` para organizar el código y mejorar la mantenibilidad. **Carpeta** `service/` **: Agrupa la lógica de negocio:** Esta carpeta aloja la lógica independiente del frontend, como la interacción con APIs, el manejo de datos y la implementación de reglas de negocio. **Ejemplos de uso de la carpeta** `service/`**:** * `service/api.js`**:** Contiene funciones para interactuar con APIs externas o un backend personalizado. * `service/auth.js`**:** Implementa la lógica de autenticación y autorización de usuarios. **Carpeta** `config/`**:** * **Almacena configuraciones globales:** Esta carpeta guarda variables de configuración sensibles, como credenciales de API, claves de acceso a bases de datos o URLs de entornos. * **Protege la información confidencial:** Evita que la información sensible se exponga en el código fuente del frontend. * **Facilita la gestión de entornos:** Permite gestionar diferentes configuraciones para entornos de desarrollo, pruebas y producción. **Ejemplos de uso de la carpeta** `config/`**:** * `config/api.js`**:** Contiene las URLs de las APIs externas o del backend personalizado. * `config/database.js`**:** Guarda la configuración de conexión a la base de datos, como usuario, contraseña y nombre de la base de datos. * `config/env.js`**:** Define variables de entorno específicas para cada entorno (desarrollo, pruebas, producción).

Jorge Morales

hace 3 meses

## Profesionalizando la arquitectura de un proyecto Next.js: `service/` y `config/` Para estructurar un proyecto Next.js de forma profesional, se recomienda seguir las convenciones establecidas y aprovechar las carpetas `service/` y `config/` para organizar el código y mejorar la mantenibilidad. **Carpeta** `service/` **: Agrupa la lógica de negocio:** Esta carpeta aloja la lógica independiente del frontend, como la interacción con APIs, el manejo de datos y la implementación de reglas de negocio. **Ejemplos de uso de la carpeta** `service/`**:** * `service/api.js`**:** Contiene funciones para interactuar con APIs externas o un backend personalizado. * `service/auth.js`**:** Implementa la lógica de autenticación y autorización de usuarios. **Carpeta** `config/`**:** * **Almacena configuraciones globales:** Esta carpeta guarda variables de configuración sensibles, como credenciales de API, claves de acceso a bases de datos o URLs de entornos. * **Protege la información confidencial:** Evita que la información sensible se exponga en el código fuente del frontend. * **Facilita la gestión de entornos:** Permite gestionar diferentes configuraciones para entornos de desarrollo, pruebas y producción. **Ejemplos de uso de la carpeta** `config/`**:** * `config/api.js`**:** Contiene las URLs de las APIs externas o del backend personalizado. * `config/database.js`**:** Guarda la configuración de conexión a la base de datos, como usuario, contraseña y nombre de la base de datos. * `config/env.js`**:** Define variables de entorno específicas para cada entorno (desarrollo, pruebas, producción). **Recomendaciones adicionales:** * **Utilizar nombres descriptivos:** Asignar nombres claros y concisos a las carpetas, archivos y funciones para mejorar la legibilidad del código. * **Documentar el código:** Agregar comentarios explicativos para describir la funcionalidad de las funciones y variables. * **Aprovechar herramientas de linting:** Implementar herramientas como ESLint y Prettier para mantener la consistencia y el estilo del código. * **Seguir las mejores prácticas de desarrollo:** Aplicar prácticas recomendadas para JavaScript y React para garantizar la calidad y la escalabilidad del código. Al adoptar estas prácticas y aprovechar las carpetas `service/` y `config/`, se puede estructurar un proyecto Next.js de forma profesional, organizada y mantenible, facilitando la colaboración entre desarrolladores y mejorando la longevidad del proyecto.