Versión en EspañolES

Aplicación Next.js lista para producción con Cursor AI

Maurice de Beijer

Independent Software Consultant and Trainer

Recording and certification are available to Multipass and Full ticket holders only

Please login if you have one.

Get Multipass

Bookmark

Codifica Menos, Crea Más: Desarrollo de Aplicaciones Impulsado por IA para Desarrolladores de React.

Únete a nosotros en una masterclass diseñada para desarrolladores de React ansiosos por aprovechar el poder de la IA para agilizar su proceso de desarrollo de aplicaciones. En "Codifica Menos, Crea Más", aprenderás a construir aplicaciones utilizando el Cursor IDE con el poder de la IA y una codificación manual mínima.

Explora cómo Cursor, un editor de código mejorado con IA, revoluciona tu experiencia de codificación al integrarse perfectamente con tu flujo de trabajo existente. Descubre sus capacidades avanzadas: predecir tus próximas ediciones, ofrecer sugerencias de código en tiempo real y comprender la arquitectura de tu proyecto. Esto te permite canalizar tu energía hacia la creatividad y la innovación en lugar de lidiar con la sintaxis y tareas repetitivas.

Te guiaremos a través de la inicialización de un proyecto Next.js, demostrando cómo utilizar herramientas de IA para crear aplicaciones dinámicas y receptivas de manera eficiente. Al concluir la masterclass, poseerás las habilidades para construir software sofisticado con un esfuerzo de codificación reducido, lo que te permitirá convertirte en un desarrollador más productivo e innovador.

Ya seas un desarrollador de React experimentado o nuevo en la codificación asistida por IA, esta masterclass te equipará con el conocimiento y las herramientas para elevar tus proyectos de desarrollo al siguiente nivel.

This workshop has been presented at React Day Berlin 2024, check out the latest edition of this React Conference.

artificial intelligence next.js

Maurice de Beijer

182 min

05 Dec, 2024

Comments

Video Summary and Transcription

Bienvenido a la masterclass sobre aplicaciones Next.js listas para producción utilizando el editor Cursor AI. Construiremos una aplicación de navegación de películas de ciencia ficción y aprenderemos a usar IA en el desarrollo de aplicaciones. La IA puede tener algunos problemas, pero aprenderemos a solucionarlos y a hacer revisiones de código con su ayuda. El Cursor IDE, con sus capacidades de IA, ofrece predicciones, lectura de documentación y sugerencias arquitectónicas. Cursor es una herramienta intermediaria que te permite usar diferentes modelos de lenguaje. Proporciona capacidades adicionales de UI y asistencia de IA. Cursor también tiene herramientas de chat y compositor para codificación interactiva. Usaremos Cursor para crear una página de aterrizaje, agregar integración de base de datos e implementar diferentes características. La masterclass cubre la revisión de código, refactorización y el impacto de la IA en la programación. La IA tiene limitaciones, pero tiene el potencial de impactar en gran medida el proceso de desarrollo.

Available in English: Production-ready Next.js App with Cursor AI

Video transcription and chapters available for users with access.

Available in other languages:

Watch more workshops on topic

IA a demanda: IA sin servidor

DevOps.js Conf 2024

163 min

IA a demanda: IA sin servidor

Top Content

Featured WorkshopFree

Nathan Disidore

En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.

artificial intelligence serverless architecture

AI para Desarrolladores de React

React Advanced 2024

142 min

AI para Desarrolladores de React

Featured Workshop

Eve Porcello

El conocimiento de las herramientas de AI es fundamental para preparar el futuro de las carreras de los desarrolladores de React, y la suite de herramientas de AI de Vercel es una vía de acceso accesible. En este curso, examinaremos más de cerca el Vercel AI SDK y cómo esto puede ayudar a los desarrolladores de React a construir interfaces de transmisión con JavaScript y Next.js. También incorporaremos APIs de terceros adicionales para construir y desplegar una aplicación de visualización de música.
Temas:- Creación de un Proyecto de React con Next.js- Elección de un LLM- Personalización de Interfaces de Transmisión- Construcción de Rutas- Creación y Generación de Componentes - Uso de Hooks (useChat, useCompletion, useActions, etc)

artificial intelligence react next.js

Tracing: Frontend Issues With Backend Solutions

React Summit US 2024

112 min

Tracing: Frontend Issues With Backend Solutions

Featured WorkshopFree

2 authors

Los problemas de frontend que afectan a tus usuarios a menudo son provocados por problemas de backend. En esta masterclass, aprenderás cómo identificar problemas que causan páginas web lentas y malos Core Web Vitals usando tracing.
Luego, pruébalo tú mismo configurando Sentry en un proyecto Next.js ya preparado para descubrir problemas de rendimiento, incluyendo consultas lentas a la base de datos en una sesión interactiva de programación en pareja.
Saldrás de la masterclass siendo capaz de:- Encontrar problemas de backend que podrían estar ralentizando tus aplicaciones de frontend- Configurar tracing con Sentry en un proyecto Next.js- Depurar y solucionar problemas de rendimiento deficiente usando tracing
Este será un evento en vivo de 2 horas donde tendrás la oportunidad de codificar junto con nosotros y hacernos preguntas.

next.js debug

Aprovechando LLMs para Construir Experiencias de IA Intuitivas con JavaScript

JSNation 2024

108 min

Aprovechando LLMs para Construir Experiencias de IA Intuitivas con JavaScript

Featured Workshop

2 authors

Hoy en día, todos los desarrolladores están utilizando LLMs en diferentes formas y variantes, desde ChatGPT hasta asistentes de código como GitHub CoPilot. Siguiendo esto, muchos productos han introducido capacidades de IA integradas, y en este masterclass haremos que los LLMs sean comprensibles para los desarrolladores web. Y nos adentraremos en la codificación de tu propia aplicación impulsada por IA. No se necesita experiencia previa en trabajar con LLMs o aprendizaje automático. En su lugar, utilizaremos tecnologías web como JavaScript, React que ya conoces y amas, al mismo tiempo que aprendemos sobre algunas nuevas bibliotecas como OpenAI, Transformers.js

artificial intelligence openai machine learning

Masterclass: Qué son y cómo aprovechar los LLMs

React Summit 2024

66 min

Masterclass: Qué son y cómo aprovechar los LLMs

Featured Workshop

2 authors

Únete a Nathan en esta sesión práctica donde primero aprenderás a alto nivel qué son los modelos de lenguaje grandes (LLMs) y cómo funcionan. Luego sumérgete en un ejercicio de codificación interactivo donde implementarás la funcionalidad de LLM en una aplicación de ejemplo básica. Durante este ejercicio, adquirirás habilidades clave para trabajar con LLMs en tus propias aplicaciones, como la ingeniería de indicaciones y la exposición a la API de OpenAI.
Después de esta sesión, tendrás una idea de qué son los LLMs y cómo se pueden utilizar prácticamente para mejorar tus propias aplicaciones.
Tabla de contenidos:- Demostración interactiva de la implementación de funciones básicas impulsadas por LLM en una aplicación de demostración- Discutir cómo decidir dónde aprovechar los LLMs en un producto- Lecciones aprendidas sobre la integración con OpenAI / descripción general de la API de OpenAI- Mejores prácticas para la ingeniería de indicaciones- Desafíos comunes específicos de React (gestión de estado :D / buenas prácticas de UX)

artificial intelligence openai

Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL

React Summit 2022

173 min

Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL

Top Content

WorkshopFree

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.

wordpress graphql next.js

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 2022

20 min

Enrutamiento en React 18 y más allá

Top Content

Delba de Oliveira

Senior Developer Advocate @ Vercel

Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.

react react file based routing patterns next.js

Construyendo un Asistente AI Activado por Voz con Javascript

JSNation 2023

21 min

Construyendo un Asistente AI Activado por Voz con Javascript

Top Content

Tejas Kumar

Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.

This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.

artificial intelligence case study

Una Guía Práctica para Migrar a Componentes de Servidor

React Advanced 2023

28 min

Una Guía Práctica para Migrar a Componentes de Servidor

Top Content

Fredrik Höglund

ephem.dev

React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.

react 18 react react server components react query next.js case study

IA y Desarrollo Web: ¿Exageración o Realidad?

JSNation 2023

24 min

IA y Desarrollo Web: ¿Exageración o Realidad?

Top Content

Wes Bos

Full Stack Developer, Speaker & Teacher, Co-host of Syntax.fm podcast.

This talk explores the use of AI in web development, including tools like GitHub Copilot and Fig for CLI commands. AI can generate boilerplate code, provide context-aware solutions, and generate dummy data. It can also assist with CSS selectors and regexes, and be integrated into applications. AI is used to enhance the podcast experience by transcribing episodes and providing JSON data. The talk also discusses formatting AI output, crafting requests, and analyzing embeddings for similarity.

artificial intelligence productivity

El Nuevo Router de Aplicaciones Next.js

React Summit 2023

27 min

El Nuevo Router de Aplicaciones Next.js

Top Content

Lee Robinson

Vercel

Today's Talk is about the Next.js App Router, which has evolved over the years and is now a core feature of Next.js. The Talk covers topics such as adding components, fetching remote data, and exploring layouts. It also discusses submitting form data, simplifying code, and reusing components. The App Router allows for coexistence with the existing pages router and enables data fetching at the layout level using React Server Components.

builders and founders next.js

El Ascenso del Ingeniero de IA

React Summit US 2023

30 min

El Ascenso del Ingeniero de IA

Shawn Swyx Wang

Latent.Space

The rise of AI engineers is driven by the demand for AI and the emergence of ML research and engineering organizations. Start-ups are leveraging AI through APIs, resulting in a time-to-market advantage. The future of AI engineering holds promising results, with a focus on AI UX and the role of AI agents. Equity in AI and the central problems of AI engineering require collective efforts to address. The day-to-day life of an AI engineer involves working on products or infrastructure and dealing with specialties and tools specific to the field.

artificial intelligence builders and founders future of development web development