Desarrollo en la Nube Híbrida con Next.js, AWS y Tailwind

Rate this content
Bookmark

Aprenderás cómo construir APIs en la nube altamente escalables con AWS e integrarlas con Next.js y darles estilo usando Tailwind CSS.

FAQ

AWS Amplify es una herramienta de AWS que se utiliza para construir y desplegar aplicaciones móviles y web rápidamente. En este proyecto, se utiliza para manejar la autenticación, la API GraphQL y el almacenamiento, facilitando la creación de una aplicación full stack con autenticación y operaciones de base de datos.

La autenticación en AWS Amplify se configura mediante el comando 'amplify add auth', que permite establecer las configuraciones predeterminadas para la autenticación de usuarios, utilizando Cognito como el servicio subyacente para manejar usuarios y sesiones.

Un índice GSI (Global Secondary Index) en DynamoDB permite realizar consultas eficientes en campos específicos de los datos almacenados. En el proyecto, se utiliza para consultar publicaciones de blog por el nombre de usuario, optimizando el acceso a los datos en la base de datos.

En el proyecto, las rutas dinámicas se manejan utilizando archivos en el directorio 'pages' que corresponden a patrones de URL. Por ejemplo, '[id].js' en el directorio 'posts' permite manejar rutas como '/posts/1', donde '1' es el ID de una publicación específica.

GraphQL es un lenguaje de consulta para APIs que permite a los clientes solicitar exactamente los datos que necesitan. En AWS Amplify, se implementa definiendo un esquema en el directorio 'backend/api' y utilizando el servicio AppSync de AWS para crear una API que maneje las consultas y mutaciones definidas en el esquema.

La generación de sitios estáticos en Next.js se realiza utilizando las funciones 'getStaticPaths' y 'getStaticProps'. 'getStaticPaths' define las rutas que se pre-renderizarán, mientras que 'getStaticProps' carga los datos necesarios para cada ruta durante el tiempo de compilación, mejorando el rendimiento al servir contenido estático.

Nader Dabit
Nader Dabit
163 min
09 Jun, 2021

Comments

Sign in or register to post your comment.
Video transcription, chapters and summary available for users with access.

Watch more workshops on topic

Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
React Summit 2022React Summit 2022
173 min
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Crear un Sitio Web Editable Visualmente con Next.js Utilizando React Bricks, con Blog y Comercio Electrónico
React Summit 2023React Summit 2023
139 min
Crear un Sitio Web Editable Visualmente con Next.js Utilizando React Bricks, con Blog y Comercio Electrónico
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: por qué lo construimos, qué es y cómo funciona- Crear una cuenta gratuita- Crear un nuevo proyecto con Next.js y Tailwind- Explorar la estructura de directorios- Anatomía de un Brick- Crear un nuevo Brick (Texto-Imagen)- Agregar un título y descripción con edición visual RichText- Agregar una imagen con edición visual- Agregar controles de barra lateral para editar props (padding y lado de la imagen)- Anidar Bricks usando el componente Repeater- Crear un brick de galería de imágenes- Publicar en Netlify o Vercel- Tipos de página y campos personalizados- Acceder a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias e Incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de destino creadas visualmente en React Bricks- Funciones empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados
Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io
React Summit 2023React Summit 2023
71 min
Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io
WorkshopFree
Nancy Du
Nataliya Ioffe
2 authors
Únete a nosotros en un masterclass práctico donde te mostraremos cómo mejorar tus habilidades de React para construir un sitio web sin cabeza de alto rendimiento utilizando Next.js, Sanity y la arquitectura JAMstack. No se requiere conocimiento previo de Next.js o Sanity, lo que hace que este masterclass sea ideal para cualquier persona familiarizada con React que quiera aprender más sobre la construcción de sitios web dinámicos y receptivos.
En este masterclass, exploraremos cómo Next.js, un framework basado en React, se puede utilizar para construir un sitio web estático con renderizado del lado del servidor y enrutamiento dinámico. Aprenderás cómo utilizar Sanity como un CMS sin cabeza para gestionar el contenido de tu sitio web, crear plantillas de página personalizadas con Next.js, utilizar APIs para integrarte con el CMS y desplegar tu sitio web en producción con Vercel.
Al final de este masterclass, tendrás una comprensión sólida de cómo Next.js y Sanity.io pueden utilizarse juntos para crear un sitio web de alto rendimiento, escalable y flexible.
Masterclass de GraphQL en la Nube con Neo4j Aura, Next.js y Vercel
GraphQL Galaxy 2021GraphQL Galaxy 2021
161 min
Masterclass de GraphQL en la Nube con Neo4j Aura, Next.js y Vercel
WorkshopFree
William Lyon
William Lyon
En este masterclass construiremos y desplegaremos una aplicación de GraphQL de pila completa utilizando Next.js, Neo4j y Vercel. Utilizando un grafo de conocimiento de artículos de noticias, primero construiremos una API de GraphQL utilizando las rutas de API de Next.js y la Biblioteca de GraphQL de Neo4j. A continuación, nos enfocaremos en el front-end, explorando cómo utilizar GraphQL para la obtención de datos con una aplicación de Next.js. Por último, exploraremos cómo agregar personalización y recomendación de contenido en nuestra API de GraphQL para servir artículos relevantes a nuestros usuarios, luego desplegaremos nuestra aplicación en la nube utilizando Vercel y Neo4j Aura.

Tabla de contenidos:
- Visión general de Next.js y cómo empezar con Next.js
- Rutas de API con Next.js y construcción de una API de GraphQL
- Utilizando la Biblioteca de GraphQL de Neo4j
- Trabajando con Apollo Client y obtención de datos de GraphQL en Next.js
- Despliegue con Vercel y Neo4j Aura
Masterclass de alto rendimiento Next.js
React Summit 2022React Summit 2022
50 min
Masterclass de alto rendimiento Next.js
Workshop
Michele Riva
Michele Riva
Next.js es un marco convincente que facilita muchas tareas al proporcionar muchas soluciones listas para usar. Pero tan pronto como nuestra aplicación necesita escalar, es esencial mantener un alto rendimiento sin comprometer el mantenimiento y los costos del servidor. En este masterclass, veremos cómo analizar el rendimiento de Next.js, el uso de recursos, cómo escalarlo y cómo tomar las decisiones correctas al escribir la arquitectura de la aplicación.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Concurrent React y Server Components están cambiando la forma en que pensamos sobre el enrutamiento, la renderización y la obtención de datos en las aplicaciones web. Next.js recientemente compartió parte de su visión para ayudar a los desarrolladores a adoptar estas nuevas características de React y aprovechar los beneficios que desbloquean.En esta charla, exploraremos el pasado, presente y futuro del enrutamiento en las aplicaciones de front-end y discutiremos cómo las nuevas características en React y Next.js pueden ayudarnos a arquitectar aplicaciones más eficientes y con más funciones.
El Nuevo Enrutador de Aplicaciones de Next.js
React Summit 2023React Summit 2023
27 min
El Nuevo Enrutador de Aplicaciones de Next.js
Next.js 13.4 lanzó recientemente la versión estable del "Enrutador de Aplicaciones" - un cambio transformador para el núcleo del framework. En esta charla, compartiré por qué hicimos este cambio, los conceptos clave que debes conocer y por qué estoy emocionado por el futuro de React.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced Conference 2023React Advanced Conference 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Los Componentes de Servidor son la nueva gran cosa, pero hasta ahora gran parte del discurso a su alrededor ha sido abstracto. Cambiemos eso. Esta charla se centrará en el lado práctico de las cosas, proporcionando un mapa de ruta para navegar el viaje de migración. Comenzando desde una aplicación que utiliza el antiguo enrutador de páginas de Next.js y React Query, desglosaremos este viaje en un conjunto de pasos accionables e incrementales, deteniéndonos solo cuando tengamos algo que se pueda enviar y que sea claramente superior a lo que comenzamos. También discutiremos los próximos pasos y estrategias para adoptar gradualmente más aspectos de este paradigma transformador.
No sabes cómo hacer SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
No sabes cómo hacer SSR
Un recorrido por la evolución del SSR en los últimos doce años. Cubriremos cómo han cambiado las técnicas, los problemas típicos, las herramientas que puedes utilizar y diversas soluciones, todo desde el punto de vista de mi experiencia personal como consumidor y mantenedor.
AWS Lambda bajo el capó
Node Congress 2023Node Congress 2023
22 min
AWS Lambda bajo el capó
Top Content
En esta charla explico cómo funciona el servicio AWS Lambda, explicando la arquitectura, cómo escala y cómo un desarrollador debería pensar cuando diseñan su software utilizando funciones Lambda
Cómo manejar correctamente los cambios de URL slug en Next.js
TypeScript Congress 2022TypeScript Congress 2022
10 min
Cómo manejar correctamente los cambios de URL slug en Next.js
Top Content
Si estás utilizando un CMS sin cabeza para almacenar contenido, también trabajas con URL slugs, las últimas partes de cualquier URL. El problema es que los editores de contenido pueden cambiar libremente los slugs, lo que puede causar errores 404, pérdida de rangos de página, enlaces rotos y, al final, visitantes confundidos en tu sitio. En esta charla, presentaré una solución para mantener un historial de URL slugs en el CMS y explicaré cómo implementar un mecanismo de redirección adecuado (¡usando TypeScript!) para páginas generadas dinámicamente en un sitio web de Next.js.

Añadir a las notas de la charla: https://github.com/ondrabus/kontent-boilerplate-next-js-ts-congress-2022