Next.js por ejemplo
Desarrolle sitios web estáticos y aplicaciones web híbridas (estáticas + SSR) con React y Next.js 11, incluidos Tailwind CSS, React Query
Lo que aprenderás
Next.js por ejemplo
- Desarrolle aplicaciones web con Next · js
- Estilo de componentes con styled-jsx o Tailwind CSS
- Cree sitios web totalmente estáticos o aplicaciones híbridas (estáticas + SSR)
- Obtener datos de una API remota, como un CMS sin cabeza
- Implementar la autenticación JWT basada en cookies
- Almacenamiento en caché de datos con React Query
Requisitos
- Familiaridad con el desarrollo web moderno: HTML, CSS, JavaScript, npm
- Familiaridad con React, incluidos los ganchos useState y useEffect
Descripción
Descrito como "El marco de React para la producción", Next.js facilita la creación de aplicaciones web altamente optimizadas en React.
Este curso lo guiará a través del aprendizaje de Next.js mediante el desarrollo de dos ejemplos: a sitio web completamente estáticoy un aplicación híbrida (estática + renderizada en el lado del servidor).
El primer ejemplo, un sitio web de blog personal, le presentará conceptos fundamentales de Next.js como pre-renderizado, enrutamiento basado en el sistema de archivos, y hidratación.
Le mostrará cómo cargar datos en páginas que son generado estáticamente en el momento de la construccióny cómo diseñar sus páginas en archivos CSS globales o con el styled-jsx biblioteca que proporciona estilos con ámbito de componente.
los Despliegue La sección le presentará todas las opciones para ejecutar su aplicación en producción, desde completamente administrada sin servidor plataformas como Vercel para configurar sus propios servidores Linux.
El segundo ejemplo que desarrollará es el sitio web de una tienda. Esta será una aplicación más compleja que carga sus datos desde un CMS sin cabeza (Strapi) y utiliza funciones avanzadas de Next.js como Regeneración estática incremental para reflejar automáticamente los cambios en los datos del backend.
Next.js por ejemplo
Le mostrará cómo habilitar Mecanografiado support en un proyecto Next.js si desea hacerlo. El uso de TypeScript es opcional; todos menos uno de los videos usan JavaScript simple. Pero encontrará el código TypeScript completo para el ejemplo de la tienda en un repositorio de GitHub si prefiere TypeScript.
El sitio web utilizará el popular Tailwind CSS biblioteca para estilizar, y la Imagen siguiente componente para la optimización de la imagen.
Verá diferentes formas de cargar datos desde una API externa, incluida la escritura de su propia Rutas API en Next.js y cómo elegir el mejor enfoque para sus requisitos específicos.
El ejemplo incluirá un sistema de autenticación seguro basado en JWT y galletas, y el Reaccionar consulta La biblioteca se utilizará para almacenar en caché los datos en el lado del cliente.
Se proporciona el código fuente completo para todos los ejemplos, con una manera fácil de ver los cambios realizados en cada conferencia.
El curso está actualizado con la última versión de Next.js, es decir, 11.
Next.js: cree aplicaciones de pila completa con Next.js usando Redux
Contenido de: https://www.udemy.com/course/nextjs-by-example/
