`, `<meta>`, Open Graph itp.) — eksportujesz metadane z `layout.tsx` lub `page.tsx`, a Next.js renderuje prawidłowe tagi `<head>`. ## Metadane statyczne ```tsx // 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 odczytuje wyeksportowany obiekt `metadata` i generuje `<title>`, `<meta name="description">`, tagi OG itp. — nie jest wymagana ręczna edycja `<head>`. ## Metadane dynamiczne (zależy od danych) Do stron, których tytuł zależy od pobieranej zawartości (wpis bloga, produkt), eksportuj asynchroniczną funkcję `generateMetadata`: ```tsx // 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] }, }; } ``` Działa na serwerze i pozwala każdej dynamicznej stronie mieć dokładne, specyficzne dla zawartości metadane — niezbędne dla SEO i dzielenia się dynamiczną zawartością w mediach społecznościowych. ## Metadane scalają się w dółe drzewa ```tsx // 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" }; ``` Metadane zdefiniowane w układzie są **scalane** z (i mogą być zastępowane przez) strony podrzędne — więc ustawisz domyślne wartości dla całej witryny raz i wartości dla poszczególnych stron, gdzie potrzeba. `template` automatycznie dodaje nazwę witryny. ## Metadane oparte na plikach ```text app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts ``` Specjalne pliki automatycznie generują odpowiednie metadane/ścieżki. ## Dlaczego to ważne Dobre metadane napędzają SEO i podglądy udostępniania w mediach społecznościowych. API metadanych czyni to deklaratywnym i bezpiecznym dla typów — statyczne `metadata` dla stałych stron, asynchroniczna `generateMetadata` dla stron opartych na danych i domyślne wartości na poziomie układu z szablonami — zastępując ręczne zarządzanie `<head>` czystym systemem renderowanym po stronie serwera.</article></body></html>

Router aplikacji ma wbudowany **API metadanych** dla tagów SEO (``, `<meta>`, Open Graph itp.) — eksportujesz metadane z `layout.tsx` lub `page.tsx`, a Next.js renderuje prawidłowe tagi `<head>`. ## Metadane statyczne ```tsx // 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 odczytuje wyeksportowany obiekt `metadata` i generuje `<title>`, `<meta name="description">`, tagi OG itp. — nie jest wymagana ręczna edycja `<head>`. ## Metadane dynamiczne (zależy od danych) Do stron, których tytuł zależy od pobieranej zawartości (wpis bloga, produkt), eksportuj asynchroniczną funkcję `generateMetadata`: ```tsx // 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] }, }; } ``` Działa na serwerze i pozwala każdej dynamicznej stronie mieć dokładne, specyficzne dla zawartości metadane — niezbędne dla SEO i dzielenia się dynamiczną zawartością w mediach społecznościowych. ## Metadane scalają się w dółe drzewa ```tsx // 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" }; ``` Metadane zdefiniowane w układzie są **scalane** z (i mogą być zastępowane przez) strony podrzędne — więc ustawisz domyślne wartości dla całej witryny raz i wartości dla poszczególnych stron, gdzie potrzeba. `template` automatycznie dodaje nazwę witryny. ## Metadane oparte na plikach ```text app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts ``` Specjalne pliki automatycznie generują odpowiednie metadane/ścieżki. ## Dlaczego to ważne Dobre metadane napędzają SEO i podglądy udostępniania w mediach społecznościowych. API metadanych czyni to deklaratywnym i bezpiecznym dla typów — statyczne `metadata` dla stałych stron, asynchroniczna `generateMetadata` dla stron opartych na danych i domyślne wartości na poziomie układu z szablonami — zastępując ręczne zarządzanie `<head>` czystym systemem renderowanym po stronie serwera.</article></body></html>

Next.js pytań