Lánzate al Portafolio IA SEO Vercel: tu primer paso concreto hoy
Portfolio IA SEO Vercel: lo esencial en un artículo — código real, diagramas y pasos concretos, extractos de un curso de 46 lecciones.
La mejor forma de aprender Portfolio IA SEO Vercel es practicando. Este artículo te ayuda a empezar con extractos prácticos extraídos de un curso de 46 lecciones, para que obtengas tu primer resultado hoy mismo.
- Introducción y Stack Moderna
- shadcn-ui el Sistema de Diseño
- Generar Componentes con v0 dev
- ChatGPT como Co-Desarrollador
- Secciones Avanzadas del Portfolio
Mini-blog en MDX dentro de Next.js
Objetivos pedagógicos
- Comprender qué es MDX y por qué es ideal para un portfolio
- Instalar y configurar MDX en Next.js App Router
- Estructurar un artículo con frontmatter (título, fecha, descripción)
- Generar la lista y las páginas de artículos de forma estática
- Comprender el impacto SEO de un blog actualizado regularmente
MDX: Markdown que habla React
MDX es Markdown enriquecido: escribes tus artículos con la sintaxis clásica de Markdown (títulos, listas, enlaces), pero también puedes insertar componentes React. En la práctica, puedes incluir un botón de shadcn, un gráfico interactivo o una demo en vivo dentro de un artículo, algo imposible con Markdown puro.
Para un portfolio, MDX es perfecto: redactas rápido, el resultado es limpio y cada artículo se convierte en una página indexable por Google. Tres o cinco buenos artículos técnicos bastan para empezar a captar tráfico de búsqueda.
| Formato | Texto | Componentes React | Uso típico |
|---|---|---|---|
| HTML puro | Verboso | No | Páginas estáticas simples |
| Markdown (.md) | Rápido | No | Documentación, notas |
| MDX (.mdx) | Rápido | Sí | Blog técnico, portfolio |
Instalar MDX en Next.js
Next.js ofrece un paquete oficial. Instalamos las dependencias y las conectamos en la configuración:
Crear un proyecto Next.js con Tailwind
Objetivos pedagógicos
- Crear un proyecto con
create-next-app - Identificar las carpetas clave del App Router
- Comprender el rol de
layout.tsxypage.tsx - Verificar que Tailwind esté correctamente configurado
- Lanzar y visualizar el proyecto en local
Requisito previo: Node.js instalado
Antes de empezar, verifica que Node.js esté instalado (versión 18.17 o superior). Next.js 14 no funciona con versiones anteriores.
| Archivo / carpeta | Rol |
|---|---|
app/layout.tsx | Layout raíz compartido por todas las páginas (html, body, fuentes). |
app/page.tsx | La página de inicio, ruta /. |
app/globals.css | Estilos globales, directivas de Tailwind. |
public/ | Archivos estáticos (imágenes, favicon) servidos en la raíz. |
tailwind.config.ts | Configuración de Tailwind (tema, colores). |
next.config.js | Configuración de Next.js. |
layout.tsx
Envuelve todas las páginas. Aquí se define la estructura HTML común, las fuentes y los metadatos por defecto.
page.tsx
El contenido específico de una ruta. Cada carpeta que contiene un page.tsx se convierte en una URL accesible.
Verificar Tailwind
Abre app/globals.css. Las tres directivas de Tailwind deben aparecer al principio del archivo:
"use client" cuando necesitemos interactividad.Instalación y configuración con Next.js
components.json y añadir tu primer componente mediante la CLI.Objetivos pedagógicos
- Ejecutar
npx shadcn@latest inity responder a las preguntas - Comprender el rol de
components.json - Identificar las variables CSS de tema añadidas
- Añadir un componente con
shadcn add - Utilizar la utilidad
cn()
Paso 1: inicializar shadcn
Desde la raíz del proyecto Next.js, ejecuta el comando de inicialización. Te hará algunas preguntas de configuración.
El archivo components.json
Este archivo indica a la CLI dónde colocar los componentes y qué convenciones seguir. Lo modificarás raramente, pero es importante entenderlo.
Por qué es útil
Puedes pasar una className a un componente para sobrescribir sus estilos sin romper los originales.
@/components/... falla, verifica que el alias @/* esté correctamente configurado en tsconfig.json. Es la causa más frecuente de error tras la inicialización.Este artículo cubre los extractos más útiles: el curso completo Portfolio IA SEO Vercel (11 capítulos, 46 lecciones, ejercicios resueltos y proyecto final) te lleva hasta el final.
./acceder-al-curso-completo curso gratuito: Vibe CodingFAQ
¿Cuánto tiempo se necesita para aprender Portfolio IA SEO Vercel?
¿Se necesitan requisitos previos?
¿Por dónde empezar en la práctica?
📬 ¿Quieres recibir este tipo de guía cada semana? Suscríbete gratis — código real, cero relleno.