Next.js 53: generateMetadata — SEO dinámico
easy⏱ 5 mincoursenextjs
Metadata como función de los datos
generateMetadata({ params }) recibe el mismo params que recibe tu componente de página, pide el registro (un producto, un post, un usuario), y devuelve un objeto de metadata. Next.js lo espera en el servidor e inyecta el resultado en el head — así los buscadores y las previsualizaciones sociales ven un título real por página en vez de uno genérico.
// app/products/[id]/page.tsx
export async function generateMetadata({ params }) {
const product = await getProduct(params.id);
return {
title: product.name + " | Store",
description: product.description,
openGraph: { images: [product.image] },
};
}
export default async function ProductPage({ params }) {
const product = await getProduct(params.id);
return <h1>{product.name}</h1>;
}
Incluye el precio en el título
generateMetadata ya incluye el precio del producto en el title devuelto, con un formato como 'Coffee Mug — $12 | Store'. Selecciona otro producto de la lista y confirma que la pestaña de navegador simulada se actualiza con el precio de ese producto.
Sigue cacheado como cualquier fetch
generateMetadata y tu componente de página suelen pedir los mismos datos (ej. el mismo producto). Next.js elimina automáticamente las llamadas fetch idénticas hechas durante un mismo render, así que no pagas la petición dos veces — escribe el fetch de forma natural en ambos lugares.