Documentación

Imagenes y Fonts

NextJS optimiza imagenes y fonts automaticamente. Menos codigo, mejor rendimiento.

Imagenes con next/image

v16Cambio En v16, decoding cambia de "async" a "auto" por defecto.

Imagen local

tsx
import Image from "next/image"
import logo from "@/public/logo.png"

export default function Header() {
  return (
    <Image
      src={logo}
      alt="Logo de mi empresa"
      width={120}
      height={40}
      priority // Cargar inmediatamente (para above-the-fold)
    />
  )
}

Con imagenes locales, Next.js detecta el tamano automaticamente y genera el width y height.

Imagen remota

tsx
<Image
  src="https://cdn.example.com/producto.jpg"
  alt="Producto destacado"
  width={600}
  height={400}
  className="rounded-lg"
/>

Necesitas configurar los dominios permitidos en next.config.ts:

ts
// next.config.ts
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "cdn.example.com",
      },
    ],
  },
}

export default nextConfig

Fill mode

Para imagenes que deben llenar su contenedor:

tsx
<div className="relative w-full h-64">
  <Image
    src="/hero.jpg"
    alt="Hero image"
    fill
    className="object-cover rounded-lg"
    sizes="(max-width: 768px) 100vw, 50vw"
  />
</div>
  • fill hace que la imagen llene el contenedor padre (que debe ser relative)
  • sizes le dice al navegador que tamano cargar segun el viewport
  • object-cover recorta para llenar sin distorsionar

Blur placeholder

Para mostrar un blur mientras carga la imagen:

tsx
// Imagenes locales: automatico
import hero from "@/public/hero.jpg"

<Image
  src={hero}
  alt="Hero"
  placeholder="blur" // Genera blur automaticamente
/>
tsx
// Imagenes remotas: necesitas el blurDataURL
<Image
  src="https://cdn.example.com/hero.jpg"
  alt="Hero"
  width={1200}
  height={630}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRg..." // Base64 pequeno
/>

Ejemplo: galeria de productos

tsx
import Image from "next/image"

interface Producto {
  id: string
  nombre: string
  imagen: string
  precio: number
}

export default function Galeria({ productos }: { productos: Producto[] }) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
      {productos.map((p) => (
        <div key={p.id} className="group">
          <div className="relative aspect-square overflow-hidden rounded-lg">
            <Image
              src={p.imagen}
              alt={p.nombre}
              fill
              sizes="(max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
              className="object-cover group-hover:scale-105 transition-transform duration-300"
            />
          </div>
          <h3 className="mt-2 font-medium">{p.nombre}</h3>
          <p className="text-gray-400">${p.precio}</p>
        </div>
      ))}
    </div>
  )
}

Fonts con next/font

NextJS descarga las fonts en build time y las sirve localmente. Cero requests externos, mejor rendimiento, cero layout shift.

Google Fonts

tsx
// app/layout.tsx
import { Inter, JetBrains_Mono } from "next/font/google"

const inter = Inter({ subsets: ["latin"] })
const mono = JetBrains_Mono({
  subsets: ["latin"],
  variable: "--font-mono",
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="es" className={`${inter.className} ${mono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

Font local

tsx
import localFont from "next/font/local"

const miFont = localFont({
  src: [
    { path: "../public/fonts/MiFont-Regular.woff2", weight: "400" },
    { path: "../public/fonts/MiFont-Bold.woff2", weight: "700" },
  ],
})

Usar en Tailwind

Define la variable CSS en el font y usala en Tailwind:

tsx
const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
})
css
/* tailwind.config.ts o globals.css */
@theme {
  --font-sans: var(--font-sans);
}

Ahora puedes usar font-sans en cualquier componente y usara Inter.

AnteriorEstilosSiguienteMetadata y Scripts