Metadata API trong Next.js App Router hoạt động như thế nào?

Next.js App Router Metadata API thay thế hoàn toàn react-helmet — type-safe, server-rendered, cascade từ layout xuống page.

2 cách dùng:

1. Static metadata: export const metadata: Metadata = { title: '...', description: '...' } từ layout.tsx hoặc page.tsx
2. Dynamic metadata: export async function generateMetadata({ params }) { ... return { title, description } } — fetch data rồi generate meta tags

Metadata cascade: layout metadata → page metadata (page override layout). Tính năng: title.template (pattern cho child pages, ví dụ '%s | MyApp'), openGraph, twitter, robots, alternates (canonical, hreflang), icons (favicon), verification (Google Search Console).

Next.js tự động generate <title>, <meta>, OG tags, Twitter cards, canonical URL từ metadata object — không cần thư viện bên ngoài.