App Router are o API de metadate încorporată pentru etichetele SEO (<title>, <meta>, Open Graph, etc.) — exporți metadate dintr-un layout.tsx sau page.tsx și Next.js redă etichetele corecte <head>.
Metadate statice
// app/about/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "About Us",
description: "Learn about our company and team.",
openGraph: {
title: "About Us",
images: ["/og-about.png"],
},
};
export default function About() { return <h1>About</h1>; }
Next.js citește obiectul metadata exportat și generează <title>, <meta name="description">, etichete OG, etc. — nicio editare manuală <head> necesară.
Metadate dinamice (depind de date)
Pentru pagini al căror titlu depinde de conținut preluat (postare blog, produs), exportă o funcție async generateMetadata:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug); // fetch the post
return {
title: post.title,
description: post.excerpt,
openGraph: { images: [post.coverImage] },
};
}
Aceasta rulează pe server și permite fiecărei pagini dinamice să aibă metadate precise și specifice conținutului — esențial pentru SEO și partajarea pe rețelele sociale a conținutului dinamic.
Metadate se fuzionează în jos pe copac
// app/layout.tsx — defaults + a title template
export const metadata: Metadata = {
title: { default: "My Site", template: "%s | My Site" }, // child titles become "About | My Site"
};
Metadate definite într-un layout sunt fuzionate cu (și pot fi anulate de) pagini copil — deci setezi implicite pe întregul site o singură dată și valori per pagină acolo unde este necesar. template adaugă automat numele site-ului.
Metadate bazate pe fișiere
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Fișierele speciale generează automat metadate/rutele corespunzătoare.
De ce este important
Metadate bune conduc SEO și previzualizări de partajare socială.
API de metadate o face declarativă și type-safe — metadata statică pentru pagini fixe, generateMetadata async pentru pagini bazate pe date, și implicite la nivel de layout cu șabloane — înlocuind gestionarea manuală <head> cu un sistem curat, renderizat de server.