Next JS 14 y Supabase [Actualizado E-Shop Project].

Name: Next JS 14 y Supabase [Actualizado E-Shop Project].
Rating: 4.6 (23 reviews)

Aprende a crear aplicaciones escalables y de alto rendimiento listas para producción con Next.js.

Highest Rated

Created byJavier Gonzalez

Last updated 3/2024

Spanish

What you'll learn

Exploraremos las nuevas funciones de Nextjs disponible en el directorio app, layouts, server components, streaming & suspense y mas.
Conoceremos las estrategias de renderización, middleware y fetching de datos desde el servidor.
Integraremos recoil para el manejo de estado, supabase para autenticación y persistencia de datos.
Desplegaremos ambientes para desarrollo y producción en Vercel, ademas de las migraciones de base de datos automatizadas.
Configuraremos una base de código estableciendo convenciones para el trabajo en equipo.

Course content

8 sections • 88 lectures • 3h 56m total length

¿Qué es NextJS? ¿Y por qué deberias usarlo?1:45
React JS Fundamentos0:21

Módulo Introducción1:09
Código fuente0:07
Como crear proyecto en NextJS?0:39
Configurar versión de NodeJS y Manejador de paquetes1:11
Cómo bloquear la versión de Node.js en su proyecto.
Publicación de repositorio remoto (Github)0:35
Configuración Análisis estático de código (ESLint)1:20
Control de formato de código (Prettier)1:12
Configuración chequeo de tipos (tsc lint)1:14
Automatización de tareas (Husky)1:19
Convención mensajes de integración de código (Commit Lint)0:58
Configuración global VSCode0:35
Depuración de código en VSCode0:22
Resumen del módulo0:35

Módulo introducción0:25
Tipos de renderización en NextJS1:56
Enrutamiento3:18
Layouts0:55
Link y navegación1:47
Estructura de directorios base de código2:14
Instalación PrimeReact1:44
Configuración Sakai template4:02
Demo ToDo App: Componente de estadisticas2:44
Demo ToDo App: Componente lista de tareas5:38
Demo ToDo App: Refactorización tabla dinamica2:09
Fetching de datos desde el cliente1:48
Rutas API4:02
Fetching de datos usando SWR3:59
Resumen del módulo0:25

Módulo introducción0:57
Que es Supabase?2:11
Como dar de alta a un proyecto en Supabase?2:25
Como crear provedor de instancias de Supabase?5:54
Configuración de autenticación basica con Supabase5:54
Control de sesión de usuario5:33
Manejo de estado con Recoil5:17
Refactorización usando custom hooks5:16
Refactorización de código usando custom hooks.
Como solucionar problemas de hidratación en react?.
Como encriptar datos en el localstorage?.
Como realizar fetching dinamico de datos en el servidor?3:25
Como realizar fetching de datos desde el servidor filtrando por id de usuario y a través de politicas de seguridad.
Como utilizar middlewares en NextJS?2:11
Demo Operaciones CRUD: Insertar tareas6:21
Demo Operaciones CRUD: Eliminar tareas6:14
Demo User Feedback: Componente de notificaciones4:38
Demo Operaciones CRUD: Actualizar tareas2:22
Demo Control de Acciones: Componente BlockUI1:44
Demo ToDo Stats: Estados derivados en Recoil2:36
Configuración proveedor de autenticación de google4:27
Resumen del Módulo1:21

Módulo introducción0:27
Niveles de renderización CSR & SSR0:54
Generación estática (SSG & ISG)2:44
Renderización del lado del servidor (SSR)2:46
Demo SSG: Renderización estática del landing page3:44
Demo SSG: Renderización estática de la grilla de productos3:47
Demo SSG: Renderización estática con fetching de datos de la grilla de productos3:24
Demo SSR: Renderización del lado del servidor detalle de productos5:31
Demo ISG: Generación estática incremental de la grilla de productos3:56
Demo NotFound: Convención archivo notFound1:25
Demo getStaticParams: Generación de parametros estaticos1:14
Demo Next Image: Componente de imagenes de Next5:18
Que es el Streaming en NextJS?5:33
Demo Streaming: Fetching de datos y react suspense3:38
Demo MobileView: Como usar Media queries y el Hook Resize de PrimeReact5:05
Directorio App y el catch-all optional1:07
Demo Nested Layouts: Creación del componente de perfil de usuario2:33
Demo Nested Layouts: Creación del componente de ordenes de usuario2:12
Demo Nested Layouts: Creación del componente detalle de ordenes de usuario4:45
Postgres Resources0:01
Demo RPC: Fetching de datos utilizando Supabase RPC (Remote Procedure Call)6:08
Manejo de errores en NextJS2:58
Manejo de errores utilizando el archivo de convención de Next y React error boundary.
Resumen del Módulo1:11

Módulo introducción0:25
Configuración general Github2:48
Despliegue de aplicación en Vercel3:48
Configuración de dominios para desarrollo y producción3:33
Configuración de automatismo para migración de base de datos6:30
Database Migration Tools & Resources0:02
Configuración de variables de entorno para desarrollo y producción3:47
Demo Google Provider: Configuración de proveedor para producción1:26
Demo WebHooks: Revalidación por demanda utilizando Supabase WebHooks.2:31
Resumen del Módulo1:16

Route Handlers4:38
En este módulo estaré publicando las actualizaciones del framework como lo es los Route handlers, Server Actions y nuevas integraciones de características que mejoraran la experiencia de desarrollo.
Server Actions3:54
En este módulo estaré publicando las actualizaciones del framework como lo es los Route handlers, Server Actions y nuevas integraciones de características que mejoraran la experiencia de desarrollo.
Server Action Blog Example3:48
Feature blog walkthrough
Server Action Demo4:03
Demo server actions can be progressively enhanced by passing them to a form element's action prop. The form is interactive before any client-side JavaScript has loaded. This means React hydration is not required for the form to submit.
Server action Final Demo4:15
Demo server actions that mutates your data and calls redirect, revalidatePath, or revalidateTag.

Requirements

Conocimiento de Javascript, fundamentos de ReactJs.
Creación de aplicaciones web en general.

Description

¡Prepárate para adentrarte en el emocionante mundo de la creación de aplicaciones web con Next.js v14 [Actualizado + proyecto E-Shop] Este curso te llevará de la mano a través de un viaje de aprendizaje inmersivo donde dominarás las habilidades necesarias para desarrollar aplicaciones web full-stack de última generación.

Con Next.js, podrás construir aplicaciones web de alto rendimiento con una sintaxis sencilla y elegante. Pero eso no es todo! utilizaremos PrimeReact una de las librerías de componentes más completas para agilizar el proceso de creación de interfaces de usuario, Recoil una biblioteca de administración de estado intuitiva y eficiente, para que tus aplicaciones sean aún más potentes y escalables, también exploraremos Supabase, una plataforma completa para autenticación y persistencia de datos, aprenderás a integrar Supabase en tus aplicaciones Next.js y a aprovechar su facilidad de uso y seguridad avanzada para llevar tus proyectos al siguiente nivel.

Pero no nos detendremos ahí!. Con Flyway y GitHub Actions, te enseñare a sincronizar y administrar tu base de datos de manera eficiente, garantizando una experiencia de desarrollo fluida y segura; además, te mostrare cómo desplegar tus aplicaciones Next.js en Vercel, aprovechando todas sus características y beneficios para asegurarte un lanzamiento sin problemas.

Este curso no solo te dará los conocimientos técnicos necesarios, sino que también te brindará la confianza y la motivación para convertirte en un experto en la creación de aplicaciones web full-stack con Next.js, Recoil, Supabase, Flyway y Vercel. ¡Prepárate para desatar tu creatividad y llevar tus habilidades de desarrollo al siguiente nivel!

Lo que aprenderas.

React: Fundamentos paso a paso y desde cero [Curso Adicional].
¿Qué es NextJS? ¿Y por qué deberias usarlo?
Creación de proyectos NextJS desde cero y comprensión de la estructura y convención de directorios
Explorando las nuevas funciones de NextJS
Trabajar con enrutamiento basado en directorios
Adición de rutas dinámicas y rutas catch-all
Implementación de diferentes formas de renderización del lado del cliente y servidor
Trabajar con diferentes formas de fetching de datos en cliente y servidor
Generación de contenido estatico y dinamico
Optimización de imágenes con el componente de imagen NextJS
Creación de aplicaciones fullstack con rutas API y middlewares
Administrar el estado de la aplicación con Recoil
Agregar proveedores de autenticación con Supabase
Controlar autorización con middlewares y politicas de seguridad
Apps completas donde aplicaremos todos estos conceptos básicos
Integración continua y despliegue por entornos en Vercel
Migraciones de bases de datos automatizadas
Bonus E-Shop Project.

¡Y mucho más!

Who this course is for:

Desarrolladores de React que quieren dar el siguiente paso y crear aplicaciones React listas para producción
Desarrolladores de React que tienen como objetivo crear aplicaciones React fullstack
Desarrolladores web en general, que quieren trabajar con el stack de tecnólogia más popular y demanda

Next JS 14 y Supabase [Actualizado E-Shop Project].

What you'll learn

Explore related topics

Course content

Introducción2 lectures • 2min

Inicialización de proyecto base13 lectures • 11min

Fundamentos15 lectures • 37min

Persistencia y manejo de estado18 lectures • 1hr 9min

Estrategias de renderización en el servidor23 lectures • 1hr 10min

Despliegue y configuración de ambientes10 lectures • 26min

Actualizaciones NextJS5 lectures • 21min

Resumen Final2 lectures • 1min

Requirements

Description

Who this course is for: