Next.js: El framework de React para producción from Udemy

Next.js: El framework de React para producción (Versión de Next.js 13+, 14+)

Next.js te brinda una excelente experiencia de desarrollo con todas las funciones que necesita para la producción: renderizado híbrido estático y de servidor, compatibilidad con TypeScript, agrupación inteligente, precarga de rutas y más.

Este curso está enfocado para las personas con conocimiento básico de React que desean aprender Next.js de forma completa e ir más allá.

Estos son algunos de los temas que aquí veremos:

Next.js desde cero
TypeScript + React + Next.js
Migración de proyectos de Next.js de JavaScript a TypeScript
Diferentes estrategias de renderizado
Rutas dinámicas y segmentos
Next.js restful API
Autenticación personalizada
Despliegues en varias plataformas
Generación de imagen de docker optimizada
Autenticación personalizada con JWT
MongoDB
PostgreSQL
NextAuth
Proveedores de autenticación
Drag&Drop en React
CRUD
Zustand
Material UI y Next UI
Re-despliegues automáticos
Pagos con PayPal y Tarjeta de crédito
Diseño responsivo
Sitio de venta de artículos con:
1. Búsquedas
2. Cookies
3. ISR + SSR + SSG + CSR según la necesidad para optimizar tiempos de respuesta
4. Manejo de usuarios
5. Dashboard administrativo
6. Carga de imágenes
7. Validación de pagos
React Hook Form
Cookies
Middlewares de Next.js (Nuevo en Next.js 12)
1. Para autenticación
2. Protección de rutas
3. Redirecciones
4. Respuestas
5. Tanto para APIs como para solicitudes de páginas
Y mucho más

Este curso tiene por objetivo enseñarte Next.js de forma completa con muchas tareas y ejercicios. El curso es en 95% TypeScript, pero cuenta con las referencias propias para reforzar esta parte que es opcional, el curso se puede hacer en JavaScript pero recomiendo que le den la oportunidad a TypeScript.

Se crean varios ejercicios dentro de este curso:

Introducción a Next: Ejercicio pequeño para el manejo de generalidades de Next,js
PokemonApp: Aplicación pequeña para el manejo de ISR y SSG
OpenJira: Aplicación intermedia para el manejo de tareas y SSR
CookieMaster: Aplicación pequeña para aprender sobre el manejo de Cookies
TesloShop: Aplicación completa y bastante grande para el manejo y venta de productos

Al final del curso no solo aprenderás Next.js, si no que también habrás desarrollado una tienda electrónica con cobros, mantenimientos, carga, optimizaciones para SEO, desplegarla y tenerla en tu portafolio de proyectos.

Es un curso enorme totalmente enfocado en Next.js para prepararte mejor como desarrollador de React.

What's inside

Learning objectives

Aprenderas next-js desde cero
Comprender cã³mo trabajar con next + typescript
Diferentes tã©cnicas de renderizado: ssr, ssg, csr, isr
Next middlewares para apis y pã¡ginas
Rutas dinã¡micas y estã¡ticas
Next auth
Material ui

Introducciã³n a next ui
Cookies
Pagos con paypal y tarjetas de crã©dito
Despliegues en varias plataformas
Show more
Show less

Aprenderas next-js desde cero
Comprender cã³mo trabajar con next + typescript
Diferentes tã©cnicas de renderizado: ssr, ssg, csr, isr
Next middlewares para apis y pã¡ginas
Rutas dinã¡micas y estã¡ticas
Next auth
Material ui
Introducciã³n a next ui
Cookies
Pagos con paypal y tarjetas de crã©dito
Despliegues en varias plataformas
Show more
Show less

Syllabus

Introducción

¿Cómo funcionará el curso?

¿Cómo hacer preguntas?

Instalaciones recomendadas

¡Únete a Nuestra Comunidad de DevTalles en Discord!

Introducción a Next.js

Introducción a la sección

Temas puntuales de la sección

Recomendaciones antes de empezar

Problematica y solución

Importante: Next 13+

Creando mi primer proyecto

Modificaciones y Turbopack

Explicación de archivos y directorios

Rutas adicionales

Metadata - Metatags

Layouts y Layouts anidados

Barra de navegación

Server Components - Async await

Next/Link

Pensemos en server components

usePathname - ActiveLink

Resumen de la sección

Código fuente de la sección

Despliegues a Vercel y Docker Images

Preparar proyecto para publicarlo

Generar build de producción

Subir repositorio a GitHub

Desplegando en Vercel

Docker - Construcción simple

Docker - Construcción recomendada

Server Side + Cliente Side Rendering

Demostración de la sección

Inicio de proyecto - MyDashboard

Estructura de nuestro dashboard

Sidebar y contenido principal

Next/Image

Iconos y ruta activa

Solución de la tarea

Counter - Manejo de estado - useState

Pensemos en hojas y pequeños componentes

Punto interesantes a contemplar

Generación dinámica - SSR

Continuación de la sección

Data Fetching - Next13+

Asignar tipo de datos y mostrar imágenes

Resolución de la tarea

Pensemos en componentes pequeños

Image Priority - Prioridad de carga

Next - Error Page

Rutas dinámicas - Argumentos por URL

Cargar información del Pokémon por ID

Metadata dinámica

Pantalla del Pokemon

Depurar código - Breakpoints

Not found Page - 404

Observaciones finales

Código de la sección

Incremental & Static Generation

Generación estática y Revalidación

Consideración importante

Tarea - Generación estática

Revalidación - Sin Fetch API

Global State - Redux y LocalStorage

Antes de comenzar - Materiales adicionales

Continuación de la aplicación

Instalación y configuración de Redux Toolkit

Counter Slice

Exportando redux toolkit hooks

Counter Reducer y acciones

Server al client state

Tarea - Store, Props y Links

Solución de tarea

RESTful Api - Get Counter

Valor del counter desde API

Estado Global - Favoritos

PokemonSlice

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Es un curso que se enfoca en el desarrollo de una tienda online con Next.js, cubriendo aspectos como el manejo de productos, pagos y optimizaciones para SEO

Utiliza TypeScript en un 95%, lo que refuerza las habilidades en este lenguaje cada vez más demandado en la industria

Incluye múltiples ejercicios y tareas, brindando a los estudiantes oportunidades prácticas para aplicar los conceptos aprendidos

Cubre una amplia gama de temas relacionados con Next.js, desde la configuración inicial hasta técnicas avanzadas como Next Middleware y API personalizadas

Requiere conocimientos básicos de React, lo que implica que los estudiantes deben tener cierta familiaridad con el framework antes de comenzar el curso

El curso no aborda en profundidad otros frameworks o bibliotecas populares para el desarrollo de interfaces de usuario en React, como React Query o Redux

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Next.js: El framework de React para producción with these activities:

Revisa los conceptos básicos de React antes de comenzar el curso

Show steps

Revisar los conceptos básicos te ayudará a construir una base sólida para aprender Next.js.

Browse courses on React

Show steps

Revisa la documentación o toma un curso básico sobre React.
Familiarízate con conceptos como componentes, estado y efectos.
Comprende cómo React maneja el renderizado y la gestión del estado.

Participa en sesiones de estudio o tutorías de Next.js

Show steps

Colaborar con otros puede brindarte nuevas perspectivas y fortalecer tu comprensión.

Browse courses on Next.js

Show steps

Encuentra compañeros de estudio o un tutor que esté dispuesto a compartir conocimientos.
Organiza sesiones regulares para discutir conceptos, resolver problemas y compartir recursos.
Aprovecha las sesiones para hacer preguntas, intercambiar ideas y aprender de los demás.

Asiste a meetups o conferencias sobre Next.js y React

Show steps

Asistir a eventos te permitirá conectarte con otros profesionales y aprender sobre las últimas tendencias.

Browse courses on Next.js

Show steps

Busca meetups o conferencias locales sobre Next.js o React.
Asiste a los eventos y participa en discusiones y sesiones.
Conecta con otros desarrolladores y comparte conocimientos.
Mantente al día con las últimas tendencias y tecnologías.

Five other activities

Expand to see all activities and additional details

Show all eight activities

Sigue un tutorial de Next.js para crear una aplicación completa

Show steps

Completar un tutorial te guiará a través de un proyecto práctico, consolidando tu aprendizaje.

Browse courses on Next.js

Show steps

Encuentra un tutorial de Next.js que se adapte a tu nivel de habilidad.
Sigue los pasos del tutorial paso a paso.
Experimenta con diferentes opciones y configuraciones para personalizar la aplicación.
Pregunta en foros o grupos de la comunidad si tienes alguna duda.

Resuelve ejercicios de codificación de Next.js

Show steps

Resolver ejercicios te ayudará a aplicar tus conocimientos y desarrollar habilidades para resolver problemas.

Browse courses on Next.js

Show steps

Encuentra ejercicios de codificación de Next.js en línea o en libros.
Intenta resolver los ejercicios por tu cuenta.
Compara tus soluciones con las proporcionadas o consulta a un mentor o instructor.
Analiza tus errores y aprende de ellos.

Crea una pequeña aplicación de Next.js

Show steps

Crear un proyecto te ayudará a aplicar los conocimientos aprendidos en el curso y reforzar tu comprensión.

Browse courses on Next.js

Show steps

Configura un nuevo proyecto Next.js.
Crea una página simple con componentes de React.
Implementa rutas y enlaces para navegar entre páginas.
Utiliza el estado y los efectos para administrar datos y el comportamiento.
Despliega tu aplicación en Vercel o Netlify.

Crea un blog o video sobre un tema relacionado con Next.js

Show steps

Crear contenido te ayudará a reforzar tu comprensión y compartir tus conocimientos con otros.

Browse courses on Next.js

Show steps

Elige un tema específico de Next.js que te apasione.
investiga y recopila información de fuentes confiables.
Crea un blog o video que explique el tema de manera clara y concisa.
Comparte tu contenido en línea y recibe comentarios de otros.

Crea un portafolio de proyectos de Next.js

Show steps

Crear un portafolio te ayudará a mostrar tus habilidades y mejorar tus posibilidades de conseguir un trabajo.

Browse courses on Next.js

Show steps

Selecciona los mejores proyectos de Next.js que hayas creado.
Crea un sitio web o repositorio de GitHub para mostrar tus proyectos.
Describe cada proyecto, destacando las tecnologías y técnicas utilizadas.
Obtén comentarios sobre tu portafolio de mentores o posibles empleadores.

Career center

Learners who complete Next.js: El framework de React para producción will develop knowledge and skills that may be useful to these careers:

React Developer

A React Developer is a software engineer who specializes in building user interfaces using the React JavaScript library. Through this course, you will not only learn how to build a production-ready React application using Next.js, but also how to integrate things like authentication and payment processing in addition to working with RESTful APIs.

See salaries and explore the career path for React Developer

JavaScript Developer

A JavaScript Developer is a software engineer who specializes in developing web applications using the JavaScript programming language. This course will teach you how to use JavaScript in a professional setting. You learn how to build large, production-ready applications.

See salaries and explore the career path for JavaScript Developer

Full Stack Engineer

A Full Stack Engineer can work on both the front end and back end of a website or web application. They have knowledge of both the client-side and server-side development process. This course can provide the foundation that you will need to enter this career. The section on Next.js middleware is a must, as middleware is a core aspect of full stack development.

See salaries and explore the career path for Full Stack Engineer

Web Developer

Web Developers build websites and web applications. Typically, their role is focused on the front end. This course will teach you everything you need to know to work on the front end, but will also dive into back end concepts as well, making you a well-rounded web developer.

See salaries and explore the career path for Web Developer

Software Engineer

Software Engineers apply engineering principles to the design, development, deployment, and maintenance of software systems. This course can provide a strong foundation for anyone looking to start their career in software engineering. It will help you to master a modern web development framework that many large software organizations use.

See salaries and explore the career path for Software Engineer

Front-End Engineer

A Front End Engineer is tasked with making websites and web applications that are engaging, visually-appealing, accessible and user-friendly. Their role is to implement the User Interface (UI) and User Experience (UX) that has been designed in collaboration with the design team. This course's focus on advanced web design using Next.js can aid you in this role, especially with the hands on experience you will gain from creating multiple projects.

See salaries and explore the career path for Front-End Engineer

Node.js Developer

A Node.js Developer is a software engineer who specializes in developing server-side web applications using the Node.js JavaScript runtime environment. This course may be helpful for aspiring Node.js Developers that want to expand their skill set into front end development, using Next.js, which is one of the most popular React frameworks.

See salaries and explore the career path for Node.js Developer

UI/UX Designer

A UI/UX Designer is responsible for designing the user interface and user experience of websites and web applications. This course may be helpful for UI/UX Designers that want to learn more about how to build their designs using modern web development frameworks.

See salaries and explore the career path for UI/UX Designer

Product Manager

A Product Manager is responsible for managing the development and launch of new products. This course may be helpful for aspiring Product Managers that want to learn more about the technical side of product development.

See salaries and explore the career path for Product Manager

Technical Writer

A Technical Writer is responsible for writing documentation for software products. This course may be helpful for aspiring Technical Writers that want to learn more about the technical side of software development.

See salaries and explore the career path for Technical Writer

Computer Science Teacher

A Computer Science Teacher is responsible for teaching computer science to students. This course may be helpful for aspiring Computer Science Teachers that want to learn more about the latest web development technologies.

See salaries and explore the career path for Computer Science Teacher

Data Scientist

A Data Scientist is responsible for collecting, analyzing, and interpreting data. This course may be helpful for aspiring Data Scientists that want to learn more about the technical side of data science.

See salaries and explore the career path for Data Scientist

Database Administrator

A Database Administrator is responsible for managing and maintaining databases. This course may be helpful for aspiring Database Administrators that want to learn more about the latest database technologies.

See salaries and explore the career path for Database Administrator

Information Security Analyst

An Information Security Analyst is responsible for protecting an organization's computer systems and networks from security threats. This course may be helpful for aspiring Information Security Analysts that want to learn more about the latest web development technologies.

See salaries and explore the career path for Information Security Analyst

Project Manager

A Project Manager is responsible for planning, organizing, and executing projects. This course may be helpful for aspiring Project Managers that want to learn more about the latest project management techniques.

See salaries and explore the career path for Project Manager

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Next.js: El framework de React para producción.

Fullstack React Native

Save

Comprehensive guide to building fullstack React applications. It covers everything from the basics of React to advanced topics such as Redux, GraphQL, and server-side rendering.

(English) Fullstack React Native: Create beautiful mobile...

Paperback

$$$

The Road to Firebase

Save

Provides a comprehensive overview of React, covering everything from the basics to more advanced topics such as Redux and GraphQL. It's a great resource for anyone who wants to learn how to build React applications.

(English) The Road to Firebase: Your journey to master...

Paperback

(English) The Road to Firebase: Your journey to master...

Kindle Edition

Next.js

El framework de React para producción

14 deals to help you save

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses