Guía práctica para optimizar tu portafolio en Next.js

Cómo optimizar tu portafolio en Next.js

Un portafolio en Next.js no solo debe verse bien, también debe estar optimizado para SEO, rendimiento y escalabilidad.

1. Mejora la estructura del proyecto

• Organiza tus componentes dentro de components.
• Usa Contentlayer2 para manejar tu contenido de blog o proyectos.
• Aplica alias en tsconfig.json para imports más limpios.

2. Optimización de imágenes

Utiliza el componente next/image y formatos como AVIF o WebP para mejorar la carga.

Ejemplo:

import Image from "next/image"

export default function ImagenEjemplo() {
  return (
    <Image
      src="/images/proyecto.png"
      alt="Ejemplo de proyecto optimizado"
      width={800}
      height={600}
      priority
    />
  )
}