Máster en Next.js de Cero a Maestro

Description

Next.js es uno de los frameworks frontend más populares hoy en día para el desarrollo y producción de aplicaciones frontend/react con una gran variedad de funciones como renderizado en servidor, estático, rutas dinámicas, optimización para imágenes, soporte para typescript, enrutado a través del sistema de archivos, soporte para css, rutas api y mucho más.

Curso Actualizado a Next.js 13 y sus nuevas funciones:

• Incremento de velocidad: Next.js 13 es más rápido que su versión anterior, lo que significa que las páginas se cargan más rápido.

• Mejoras en la compatibilidad con TypeScript: Next.js 13 ahora es compatible con TypeScript 4.5, lo que permite a los desarrolladores escribir código más seguro y con menos errores.

• Mejoras en la compatibilidad con React: Next.js 13 ahora es compatible con React 18, lo que permite a los desarrolladores utilizar las últimas características de React.

• Mejoras en la compatibilidad con Vercel: Next.js 13 ahora es compatible con Vercel, lo que permite a los desarrolladores implementar sus aplicaciones de Next.js en Vercel con facilidad.

• App Directory: Next.js 13 introduce el directorio de aplicaciones, que mejora la experiencia de enrutamiento y diseño en Next.js y se alinea con el futuro de React. El directorio de aplicaciones es actualmente una versión beta y no se recomienda su uso en producción todavía. Puedes usar Next.js 13 con el directorio de páginas con características estables como los componentes mejorados de next/image y next/link, y optar por el directorio de aplicaciones a tu propio ritmo. El directorio de páginas seguirá siendo compatible en el futuro previsible. El directorio de aplicaciones incluye soporte para:

  • Layouts: Comparte fácilmente la interfaz de usuario entre rutas mientras se preserva el estado y se evitan las re-renderizaciones costosas.

  • Server Components: Hace que el servidor sea la opción predeterminada para las aplicaciones más dinámicas.

  • Streaming: Muestra estados de carga instantánea y transmite unidades de IU a medida que se renderizan.

  • Soporte para la obtención de datos: Los componentes asincrónicos del servidor y la API de búsqueda extendida permiten la obtención de datos a nivel de componente.

Además, Next.js 13 presenta Turbopack, un nuevo empaquetador de módulos que acelera tus aplicaciones, y el nuevo componente de fuente @next/font, que carga y optimiza automáticamente tus fuentes. También se han realizado mejoras en la optimización de imágenes y en la implementación sin servidor.

Lo que aprenderás en la nueva actualización del curso a Next.js 13:

1- Introducción: La introducción proporciona una visión general del tema a tratar, en este caso, Next.js, y establece el contexto para el lector o el desarrollador, presentando las principales ideas y objetivos del contenido que seguirá.

2- Qué es Next.js: Next.js es un framework de desarrollo web de código abierto basado en React que se utiliza para construir aplicaciones web modernas. Ofrece características como el enrutamiento, la renderización del lado del servidor y la generación de sitios estáticos, lo que lo hace especialmente adecuado para aplicaciones web de alto rendimiento.

3- Configurando Entorno de Desarrollo: En esta sección, se detallan los pasos y las herramientas necesarios para configurar un entorno de desarrollo para trabajar con Next.js. Esto incluye la instalación de Node.js, npm, y otras dependencias clave.

4- Creando el Primer Proyecto Next.js: Se explica cómo iniciar un nuevo proyecto Next.js desde cero, incluyendo la creación de una estructura de archivos básica y la configuración inicial para comenzar a desarrollar una aplicación.

5- Estructura del Proyecto (Carpetas y Archivos): Esta sección describe la organización de carpetas y archivos en un proyecto Next.js, proporcionando una guía sobre dónde colocar componentes, páginas, estilos y otros recursos.

6- Enrutado y Navegación: Next.js ofrece enrutamiento de manera nativa, lo que facilita la navegación entre páginas de la aplicación. Esta sección explora cómo definir rutas y cómo navegar entre ellas.

7- Componentes de Tipo Cliente y Servidor: Se explica la diferencia entre los componentes del lado del cliente y del servidor en Next.js, y cómo se pueden utilizar para lograr la renderización del lado del servidor cuando sea necesario.

8- Obtención de Datos (Data Fetching): Next.js proporciona diversas formas de obtener datos para su aplicación, ya sea en el lado del servidor o del cliente. Aquí se discuten las técnicas y las mejores prácticas para la obtención de datos.

9- Cache: La sección sobre la caché explora cómo se pueden implementar estrategias de almacenamiento en caché para mejorar el rendimiento de la aplicación y reducir las solicitudes innecesarias al servidor.

10- Renderizado Estático y Dinámico: Next.js permite tanto el renderizado estático como el dinámico de páginas. En esta sección, se detallan los conceptos y se explica cuándo es apropiado utilizar cada tipo de renderizado en una aplicación Next.js.

Lo que aprenderás en este curso:

Fundamentos de Next js

• Crear una App Next.js

• Estructura de carpetas y archivos

• Páginas y Rutas

• Encabezados Html

• Layout y estilos CSS

• Estilos JSX

• Personalizar Documento HTML

• Obtención de Datos

• Mostrar Datos

Proyecto 1: Crud con Next.js y Firebase

• Configurar Firebase y Base de Datos

• Instalación de Paquetes

• Personalizar Encabezado

• Obtener Datos                         

• Lista de Registros

• Crear Formulario

• Guardar Nuevo Registro

• Funcionalidad Click para Editar

• Editar Registro

• Borrar Registro

Proyecto 2: Aplicación de Películas

• Creación y configuración del proyecto

• Integración de Bootstrap 5 e íconos

• Creación de componentes

• Layout HTML y estilos CSS

• Creación de Backend con Strapi 4

• Configuración backend, autenticación, roles y permisos, creación de colecciones y demás

• Consumir API Películas Backend desde Next.js

• Autenticación y autorización desde Next.js

• Funcionalidad de subida de archivos al Backend desde Next.js

• Limitar, ordenar y paginar registros

• Acceso(Login), registro, salir(Logout)

• Capturar los errores del backend y mostrarles en el frontend

• Integración de plugin toastify para notificaciones

• Protección de rutas privadas y navegación

• Data Fetching: getServerSideProps, getStaticProps y getStaticPaths

• Enrutado, Links, Imágenes, Alias y Estilos CSS

• Autenticación JWT (Json Web Token) y Cookie en Next js

• Next.js y react toastify,

• Creación de un Backend Api completo con Strapi 4

¿Qué debes saber antes de tomar este curso?

Debe conocer los conceptos básicos de JavaScript y las características modernas de JavaScript, como funciones de flecha, reestructuración, el operador de propagación.

También debe conocer los conceptos básicos de React. No se explicarán cosas como componentes, accesorios, JSX ya que el enfoque es en el framework Next.js

Recursos y archivos fuente: Todos los recursos necesarios se proporcionarán en las secciones

TAKE THIS COURSE