Curso de Next.js 14
Curso de Next.js 14

Conceptos básicos de Next.js 14

1

¿Qué es Next.js y por qué aprenderlo si quieres ser frontend senior?

2

Arquitectura de un proyecto de Next.js

3

Herramientas y stack utilizado en el curso

4

Cómo crear rutas en Next.js

5

Cómo crear Layout en Next.js

6

Cómo funciona la navegación en Next.js

7

Manejo de parámetros en rutas en Next.js

8

React Server Components en Next.js: notación "use Client"

9

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

10

CSS Modules en Next.js 13

11

Uso de Sass en Next.js

12

Cómo utilizar estilos globales en Next.js

13

Cómo agregar archivos estáticos en Next.js

14

Manejo y optimización de imágenes con Next Image

15

Optimización del componente image en Next.js

16

Optimización de fuentes con Next.js

17

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

18

Creación de tienda de Shopify para un proyecto en Next.js

19

Manejo de variables de entorno en Next.js

20

Cómo obtener información de una API con Next.js

21

Manejo de estado de carga con el archivo loading.tsx

22

Route Grouping en Next.js

23

Manejo de errores en la UI con el archivo error.tsx

Quiz: Data Fetching en Next.js

Next.js Avanzado

24

Implementando páginas de Not Found y error global

25

Cómo impactan los React Server Components en un proyecto en Next.js

26

Cuándo utilizar layout o template en Next.js

27

Arquitectura profesional para data fetching en un proyecto en Next.js

28

Next.js para backend: manejando rutas con archivos Route Handlers

29

Proyecto: implementando la página de tienda

30

Patrones de data fetching en Next.js

31

Proyecto: filtrando categorías de productos

32

Data fetching de parámetros en el servidor y cliente

33

Proyecto: página de producto y arreglos en el sitio

34

Cómo funciona el Fetch y el Caché de Next.js

35

Revalidando cache con revalidateTag y revalidatePath en Next.js

36

Cómo hacer redirects en Next.js

37

Proyecto: HTML dinámico en la descripción del producto

38

Mejorando SEO de una página en Next.js

Quiz: Next.js Avanzado

Autenticación y autorización

39

Manejando autenticación y autorización con Storefront APÏ de Shopify

40

Server Actions en Next.js

41

Proyecto: proceso de Sign-Up con GraphQL

42

Manejo de cookies para colocar un token de acceso de un proyecto en Next.js

43

Cómo implementar un flujo de login en un proyecto en Next.js

44

Validando token de acceso de usuario en un proyecto en Next.js

45

Proyecto: implementando el carrito de compras

46

Manejo de estado global con zustand en Next.js

47

Proyecto: agregando items al carrito de compras

48

Cómo integrar el checkout de Shopify a un proyecto en Next.js

49

Implementar middleware en proyecto en Next.js para protección de rutas

Inteligencia Artificial

50

Creando componente de chatbot de ventas con la SDK IA de Vercel

51

Implementación de un bot de ventas en una app Next.js

Performance

52

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

53

Análisis de bundle para Next.js 14

Quiz: Performance

Frontend Ops

54

Edge runtime

55

Despliegue de un proyecto Next.js en Vercel

56

Mejores prácticas en arquitecturas empresariales

Quiz: Frontend Ops

Next.js es parte de tu nuevo stack

57

¡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,

Convierte tus certificados en títulos universitarios en USA

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

19 Días
13 Hrs
28 Min
38 Seg
Curso de Next.js 14

Curso de Next.js 14

Enrique Devars

Enrique Devars

Manejo de errores en la UI con el archivo error.tsx

23/57
Recursos

Aportes 8

Preguntas 3

Ordenar por:

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

Gerardo Castillo

Gerardo Castillo

hace un año

Algo importante que menciona la documentación es el comportamiento de error.js en rutas anidadas:

  • Un archivo error.tsx manejará los errores de todos los segmentos anidados cuando no haya un error.tsx más especifico en dicho nivel anidado.
  • Un archivo error.tsx no maneja los errores que puedan producirse en el layout.tsx de su mismo nivel (dado que el error boundary se renderiza dentro del layout como se aprecia en la ilustración).
  • Para manejar errores producidos en un layout.tsx especifico, se debe crear un error.tsx en la ruta padre de dicho layout.tsx. Para el caso del root layout, se usa una variación de error.tsx denominada global-error.tsx (este último sí debe estar ubicado en el mismo nivel del root layout).
  • El archivo global-error.js envuelve toda la app, el componente que retorna reemplazaría al root layout en un eventual caso incluso teniendo que definir su propio <html> y <body>. De todos modos este escenario sería poco probable dado que el root layout suele ser menos dinámico. Entonces, el archivo global-error.js tiende a manejar errores generales mientras que error.js, cuyo uso es recomendado, permite un control más granular.
Cristopher

Cristopher

hace 9 meses
Solo unas inquietudes: 1. Porque usar typescript si no se van a tipificar los objetos. 2. Tampoco veo que usen snipts para crear las páginas y componentes o en general, creo que debería.
Santiago Rodriguez Palacio

Santiago Rodriguez Palacio

hace un año
Sencillo, pero funcional :D ![](https://static.platzi.com/media/user_upload/error-cd897611-5afa-4b35-827a-d9186b4eac5a.jpg)
Guido Juliano Mazzuchini Ubaldi

Guido Juliano Mazzuchini Ubaldi

hace un año
Les dejo por aqui los estilos que aplique al componente error ```js
<h1 style={{ fontSize: "4rem", color: "#721c24", // Color del título (puedes cambiarlo) }} > :(

Ha ocurrido un error

<button style={{ padding: "0.5rem 1rem", fontSize: "1rem", color: "#fff", // Color del texto del botón (puedes cambiarlo) backgroundColor: "#d9534f", // Color de fondo del botón (puedes cambiarlo) border: "1px solid #d9534f", // Borde del botón (puedes cambiarlo) borderRadius: "4px", // Borde redondeado del botón (puedes cambiarlo) cursor: "pointer", marginTop: "1rem", }} > Intentar de nuevo </button>
```y el resultado es este (sin estilo de fuente por que lo probe en codesandbox.io) ![](https://static.platzi.com/media/user_upload/imagen-22259a5e-2791-40ec-a262-e06847442b2c.jpg)
Omar Alejandro Morales Mendoza

Omar Alejandro Morales Mendoza

hace un año
Con un poco de apoyo de imágenes generadas ![](https://static.platzi.com/media/user_upload/image-e82928c9-2271-49dc-9d09-07334a83cf43.jpg)
Guido Juliano Mazzuchini Ubaldi

Guido Juliano Mazzuchini Ubaldi

hace un año
![](https://static.platzi.com/media/user_upload/imagen-48eb9181-1b4f-4ac8-86c5-f27e0c71e729.jpg)
Juan Diaz

Juan Diaz

hace 10 meses
"use client";

import { useEffect } from "react";

interface ErrorProps {
  error: Error;
  reset: () => void;
}

export default function Error({ error, reset }: ErrorProps) {
  useEffect(() => {
    console.log(error);
  }, [error]);

  return (
    <div
      style={{
        padding: "10rem",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      <h1>🚨</h1>
      <p>It seems that we are having some issues. Please try again later.</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}
David Alberto de Jesús Mendoza Pardo

David Alberto de Jesús Mendoza Pardo

hace un año
Alineado con el estilo del sitio 👀 ![]()