
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á.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Los estilos globales se refieren a las hojas de estilo que se aplican a toda la aplicación web, afectando a todos los elementos y componentes por igual. Estos estilos son útiles para definir reglas de diseño generales, como tipografía, colores de fondo y márgenes, que se aplican de manera consistente en todo el sitio.
Los módulos CSS son una técnica de estilización en la que los estilos se encapsulan en módulos individuales, lo que evita que las reglas de estilo entren en conflicto con otras partes de la aplicación. Cada módulo tiene su propio alcance y no afecta a otros elementos de la página.
Tailwind CSS es un marco de diseño CSS utilitario que simplifica la creación de interfaces de usuario al proporcionar una serie de clases predefinidas que se pueden aplicar directamente a los elementos HTML. Esto permite un desarrollo rápido y la construcción de diseños flexibles y personalizables.
DaisyUI es un complemento para Tailwind CSS que agrega un conjunto adicional de componentes y utilidades predefinidas para acelerar el desarrollo de interfaces de usuario. DaisyUI facilita la creación de componentes complejos y atractivos mediante la extensión de las capacidades de Tailwind CSS.
Esta sección cubre los conceptos básicos relacionados con el enrutado en una aplicación web, que es el proceso de dirigir a los usuarios a diferentes páginas o vistas según las URL que visitan.
Las rutas dinámicas permiten la creación de URL que contienen segmentos variables. Esto facilita la construcción de aplicaciones web más flexibles y dinámicas.
En esta sección, se explora cómo obtener y utilizar los segmentos de la ruta actual en una aplicación para personalizar el contenido o el comportamiento de la página.
En esta sección, se explora cómo obtener y utilizar los segmentos de la ruta actual en una aplicación para personalizar el contenido o el comportamiento de la página.
Los layouts son plantillas que se utilizan para estructurar el aspecto de las páginas de una aplicación de manera consistente. Esta sección detalla cómo implementar y utilizar layouts en Next.js.
La navegación se refiere al proceso de cambiar de una página a otra en una aplicación web. Se exploran las diferentes opciones y métodos de navegación disponibles en Next.js.
La navegación programática implica la navegación a través de código JavaScript en lugar de hacerlo a través de acciones del usuario. Aquí se describe cómo realizar la navegación programática en Next.js.
Los cargadores (loading) se utilizan para mostrar indicadores visuales de progreso o carga mientras se obtienen datos o se realiza una transición de página. Se aborda cómo implementarlos en una aplicación Next.js.
En esta sección, se explica cómo gestionar errores cuando una página no se encuentra (error 404). Se detallan las estrategias para proporcionar una experiencia de usuario adecuada en caso de que la página solicitada no exista.
El manejo de errores inesperados se refiere a la forma en que se gestionan y se presentan errores que no están relacionados con las rutas o páginas no encontradas. Esta sección aborda cómo manejar y mostrar errores inesperados de manera adecuada en una aplicación Next.js.
En esta sección se explica cómo recuperar una lista de registros o datos de una API. Esto puede incluir detalles sobre cómo realizar solicitudes HTTP, procesar respuestas y mostrar la información en la aplicación.
Se detalla cómo obtener un registro específico o dato individual desde una API, lo que a menudo implica proporcionar un identificador único y procesar la respuesta para mostrar los detalles del registro.
Se aborda cómo enviar datos a una API para crear un nuevo registro. Esto incluye la preparación de los datos, la realización de una solicitud POST y la gestión de la respuesta.
Esta sección se centra en cómo modificar un registro existente a través de una API. Se explican los pasos necesarios para enviar una solicitud de actualización (por ejemplo, PUT o PATCH) y procesar la respuesta.
Se detalla el proceso de eliminar un registro o dato específico desde una API. Esto involucra realizar una solicitud de eliminación (por ejemplo, DELETE) y gestionar la respuesta.
Las validaciones de API se refieren a las reglas y restricciones que una API puede aplicar a los datos que recibe. Se discute cómo se manejan y se comunican las validaciones en una API.
Esta tarea específica implica la implementación de solicitudes GET y POST en relación con la entidad "Productos". Los desarrolladores suelen utilizar esta tarea para practicar y aplicar los conceptos mencionados.
Esta sección proporciona la solución a la tarea anterior, ofreciendo un ejemplo funcional de cómo realizar solicitudes GET y POST para la entidad de productos en una API. Esto puede servir como referencia o guía para los desarrolladores que abordan la tarea.
En esta sección, se detalla el proceso de instalación y configuración del sistema de gestión de bases de datos MySQL. Esto incluye la instalación del servidor MySQL y la configuración inicial.
Se explica cómo instalar y configurar Prisma, que es una herramienta de mapeo de objetos-relacionales (ORM) que permite interactuar con la base de datos de forma más sencilla y eficiente.
En esta etapa, se aborda cómo definir un modelo de datos utilizando Prisma y MySQL, lo que implica describir la estructura de las tablas de la base de datos y las relaciones entre ellas.
Las migraciones son scripts que se utilizan para realizar cambios en la estructura de la base de datos. Se explica cómo crear migraciones con Prisma para modificar el esquema de la base de datos.
Prisma proporciona un cliente que facilita la interacción con la base de datos. En esta sección, se describe cómo crear un cliente Prisma y cómo utilizarlo para realizar operaciones de lectura y escritura en la base de datos.
Se detalla cómo utilizar Prisma para obtener datos de la base de datos, incluyendo cómo realizar consultas para recuperar registros específicos o conjuntos de datos.
Se explora cómo utilizar Prisma para crear nuevos registros en la base de datos, lo que implica la inserción de datos en las tablas correspondientes.
Se describe el proceso de actualización de registros existentes en la base de datos utilizando Prisma, lo que puede incluir la modificación de valores en registros específicos.
Esta sección se centra en cómo eliminar registros de la base de datos utilizando Prisma, lo que implica la eliminación de registros específicos.
Esta tarea específica puede implicar la implementación de la funcionalidad relacionada con la entidad "Producto". Los desarrolladores suelen utilizar esta tarea para practicar y aplicar los conceptos mencionados en los elementos anteriores.
Esta sección proporciona la solución a la tarea anterior, ofreciendo un ejemplo funcional de cómo implementar la funcionalidad relacionada con la entidad de producto utilizando Prisma y MySQL. Esto puede servir como referencia o guía para los desarrolladores que abordan la tarea.
En esta sección se detalla el proceso de configuración de la plataforma Cloudinary, que es un servicio en la nube utilizado para almacenar y gestionar archivos multimedia, como imágenes y videos. Esto incluye la creación de una cuenta, configuración de ajustes, y obtención de credenciales de acceso.
Se explica cómo cargar archivos multimedia, como imágenes, en Cloudinary. Esto puede implicar el uso de la API de Cloudinary o la implementación de widgets de carga de archivos en una aplicación.
En esta sección se aborda cómo mostrar imágenes almacenadas en Cloudinary en una aplicación web. Esto incluye la obtención de las URL de las imágenes y su integración en la interfaz de usuario.
Los widgets de carga de imágenes son herramientas que permiten a los usuarios cargar imágenes de manera interactiva. Se describe cómo personalizar y ajustar el widget de carga de imágenes de Cloudinary para satisfacer las necesidades específicas de la aplicación.
La introducción proporciona una visión general del tema a tratar y establece el contexto para el lector o el desarrollador, presentando las principales ideas y objetivos del contenido que seguirá, en este caso, la autenticación y el uso de Next Auth.
Se describe cómo configurar Next Auth, una biblioteca de autenticación de código abierto que simplifica la implementación de la autenticación en aplicaciones web. Esto incluye la configuración inicial y la conexión a proveedores de autenticación.
Esta sección se centra en la configuración de Google como proveedor de autenticación en Next Auth. Se detallan los pasos para conectar la autenticación de usuarios a través de Google.
Se explica el concepto de autenticación y sesiones en el contexto de la seguridad y la protección de datos en una aplicación web. Se abordan los principios fundamentales de cómo funcionan las sesiones de usuario.
Se describe cómo acceder y utilizar la información de sesión del usuario en el lado del cliente de la aplicación, lo que permite personalizar la experiencia del usuario según su estado de autenticación.
En esta sección se explica cómo se accede y gestiona la información de la sesión del usuario en el lado del servidor, lo que es fundamental para garantizar la seguridad y la integridad de los datos del usuario.
Se detalla cómo implementar la funcionalidad de cierre de sesión, lo que permite a los usuarios cerrar su sesión y finalizar su acceso a la aplicación de forma segura.
Se abordan estrategias para proteger rutas o páginas específicas de la aplicación, asegurando que solo los usuarios autenticados tengan acceso a ellas.
Los adaptadores Prisma se utilizan para integrar la autenticación con una base de datos, en este caso Prisma. Se describe cómo utilizarlos para gestionar la autenticación en la aplicación.
Se explica cómo implementar la autenticación local utilizando credenciales, lo que permite a los usuarios registrarse y acceder a la aplicación con un nombre de usuario y una contraseña.
Esta sección se centra en cómo permitir que los usuarios se registren en la aplicación, lo que incluye la recopilación de información de registro y su almacenamiento en la base de datos.
En esta clase empezaremos por definir de manera práctica que es Next.js, cuales son sus ventajas y su popularidad
En esta clase podrás ver el demo del proyecto terminado, el que aprenderás a hacer en la sección del proyecto Crud con Next.js y Firebase
En esta clase podrás ver el demo del proyecto terminado, el que aprenderás a hacer en la sección del proyecto Aplicación de Películas con Backend
En esta clase te enseñaré a crear y configurar el entorno de desarrollo para trabajar de manera comoda con Next.js
En esta clase te enseñaré a crear una Aplicación con Next.js
En esta lección haremos una revisión por la estructura de carpetas y archivos de un proyecto Next.js
En esta sección te enseñaré como crear página y como funcionan las rutas
En esta lección veremos como crear encabezados html personalizados
En este lección veremos como crear un Layout global para nuestro sitio y añadir estilos CSS
En esta lección veremos trabajar con estilos css en línea usando JSX
Next.js permite la personalización del documento html, aquí te enseñaré como hacerlo
Una de las parte más importantes es el Data Fetching un obtención de datos en Next.js, para traer datos de diferentes fuentes como backend u otros. Aquí veremos que opciones nos da Next.js para esta tarea.
Una vez que obtenemos los datos es necesario aprender como mostarlos en las vistas de nuestra aplicación y por ende en el navegador
En esta clase te mostraré el demo del proyecto final que aprenderás a desarrollar en esta sección
Iniciaremos creando nuestro proyecto en Next.js
En esta clase te enseñaré a configurar firebase y la base de datos que es la que vamos a usar en esta sección
En esta clase te enseñaré a instalar los paquetes necesarios para el desarrollo de esta sección usando NPM
En esta clase personalizaremos los encabezados de nuestra aplicación
En esta clase te enseñaré como obtener los datos
En esta clase te enseñaré a mostrar la lista de registros en nuestra vista html y la creación de componentes
En esta clase te enseñaré a crear el formulario que nos va a permitir crear un nuevo registro de usuario
En esta clase te enseñaré a guardar el registro que obtenemos de nuestro formulario en firebase desde Next.js
En esta clase te enseñaré a crear la funcionalidad que al presionar el ícono de editar los datos pasen el formulario y el boton y la funcionalidad cambién para editar un registro
En esta clase te enseñaré a crear la funcionalidad de editar el registro y que se vea reflejado en Firebase
En esta clase veremos como implementar la funcionalidad de borrar un registro
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