Next.js 54: Metadata estática y el objeto metadata
easy⏱ 5 mincoursenextjs
El SEO más simple que vas a escribir
export const metadata = {...} es la opción por defecto para páginas estáticas — About, Contacto, Términos, una landing de marketing. Compáralo con generateMetadata de la lección anterior: la misma forma de objeto, pero sin params, sin await, y se puede analizar de forma estática e insertar en build time en vez de calcularse por cada request.
// app/about/page.tsx
export const metadata = {
title: "About Us",
description: "Learn about our company and mission.",
};
export default function AboutPage() {
return <main>...</main>;
}
Completa la metadata de la página de Contacto
PAGES.contact.metadata ahora tiene una description real. Haz clic en Contacto y confirma que el panel de vista previa la muestra en vez de la advertencia 'Missing description'. Prueba vaciarla de nuevo a '' para ver que la advertencia reaparece, y luego restáurala.
Estático vs dinámico — elige según la dependencia de datos
La regla es simple: si el title/description necesita datos que no tienes hasta que llega un request (un nombre de producto, un username), usa generateMetadata. Si es igual para todos, siempre, usa el objeto metadata plano — es menos código y Next.js lo puede optimizar de forma más agresiva.