Crear un portafolio profesional con Next.js es más simple cuando se combina el modo Code de Windsurf con Cascade. Aquí verás cómo escribir archivos y ejecutar comandos directamente desde el editor, aprovechar entrada por voz e imágenes, y partir de un wireframe en Figma para guiar la estructura del sitio.
¿Qué ofrece el modo Code de Windsurf con Cascade?
El modo Code no solo conversa como Chat, también escribe archivos, código y ejecuta comandos. La diferencia clave es operativa y productiva.
Interacción por texto, voz e imágenes como referencia gráfica.
Generación y edición de archivos del proyecto en vivo.
Ejecución de comandos de terminal desde lenguaje natural.
Además, se trabaja con un wireframe de Figma como guía visual del sitio: cuatro páginas principales, componentes compartidos y una ruta dinámica para posts del blog.
¿Cómo se definió el diseño con Figma como referencia?
Se parte de un wireframe muy básico con cuatro pantallas.
Homepage: header, sección hero con foto y descripción, blog con post destacado y listado de tres siguientes, footer.
Blog: post destacado con título, excerpt y botón de acción; listado a dos columnas; mismo header y footer.
Single post: imagen grande, título destacado, contenido y recomendaciones de siguientes posts.
About: hero similar al del homepage, descripción larga, botón de contactar, sección de proyectos con foto y sección de charlas con tarjeta similar al blog.
¿Cómo iniciar un proyecto Next.js desde la terminal?
Abre la terminal con Command J o desde el panel. Con Command I o Control I se abre una ventana de chat que traduce instrucciones en lenguaje natural a comandos. Por ejemplo, “instala Next.js en este directorio” devuelve el comando para crear la app en el directorio actual.
Durante la instalación se eligen opciones clave.
TypeScript: sí.
Sling: sí.
Tailwind: sí.
Estructura en source directory: sí.
Uso de app router: sí.
TurboPack de Vercel: sí.
Alias de imports por defecto: sin personalizar.
Una vez instalado, se revisa el package.json para confirmar versiones recientes de Next.js y React. Todo queda listo como base para trabajar con Cascade en modo Code.
¿Cómo generar y aprobar cambios con diffs?
Se copia en Cascade un prompt para crear las páginas: homepage, about, blog y el single del blog como ruta dinámica con slug, cada una mostrando solo el título.
El modelo usado es Cloudsonnet 4.
Detecta proyecto Next.js 13 o superior con app router y actualiza la página inicial existente.
Crea carpetas y archivos nuevos para about, blog y [slug].
Muestra un enlace “4 archivos” con diffs: verde para líneas agregadas, rojo para eliminadas.
Permite aceptar por archivo o aceptar todo. El homepage muestra muchas líneas eliminadas y solo dos agregadas, tal como se pidió.
¿Qué estructura de páginas y rutas dinámicas se generó?
Se creó la estructura bajo la carpeta app dentro de source, incluyendo /about, /blog y /blog/[slug]. El single es dinámico porque depende del slug en la ruta.
Se muestra un resumen visual del “scaffolding” para entender la jerarquía de carpetas y rutas.
Cada página contiene únicamente el título para continuar el desarrollo en pasos posteriores.
¿Cómo ejecutar y validar en localhost?
Con el servidor de desarrollo se verifica rápidamente que las rutas funcionen.
npm run dev
La app corre en el puerto 3000.
En “/” se ve el título de la página inicial.
En “/about” se ve el título correspondiente.
No hay estilos aún, tal como se definió en el prompt.
Habilidades y conceptos activados en el proceso.
Uso de Cascade en modo Code para creación de archivos y ejecución de comandos.
Chat de terminal para convertir lenguaje natural en comandos.
Lectura de diffs y revisión de cambios con opción de aceptación parcial o total.
Estructura de Next.js con app router, source directory y rutas dinámicas con slug.
Configuración con TypeScript, Sling, Tailwind y TurboPack.
Puesta en marcha con npm run dev en puerto 3000.
¿Te animas a probarlo con tu propio stack técnico? Comparte en los comentarios cómo te fue en tus primeras interacciones con Cascade y qué mejoras te gustaría implementar.
