Layout'lar va metadata

Layout nima

Layout — bu sahifalaringizni o‘rab turadigan va siz ular orasida navigatsiya qilganingizda o‘rnida qoladigan UI. Sarlavhalar (header), navigatsiya panellari, footerlar, sidebarlar — umumiy bo‘lgan har qanday narsa — layoutga tegishli bo‘ladi, shunda ular har bir sahifa o‘zgarishida qaytadan qurilmaydi.

Layout — bu layout.tsx faylidagi komponent bo‘lib, u children prop’ini oladi va uni render qiladi:

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <header>My Site</header>
        {children}          {/* the active page goes here */}
        <footer>© 2024</footer>
      </body>
    </html>
  );
}

Root layout majburiy

Har bir App Router ilovasi app/layout.tsx manzilida root layout’ga ega bo‘lishi kerak. U maxsus: u <html> va <body> teglarini render qilishi shart, chunki u butun ilovangizni o‘rab turadi. Next.js usiz ishlamaydi.

Ichma-ich (nested) layoutlar

Har qanday route papkasi ichiga layout.tsx qo‘shib, faqat o‘sha bo‘limni o‘rashingiz mumkin. Layoutlar ichma-ich joylashadi: sahifa o‘zining layouti bilan, keyin o‘sha layoutning ota-layouti bilan va root’gacha shu tariqa o‘raladi.

app/
  layout.tsx            # wraps everything
  dashboard/
    layout.tsx          # wraps only /dashboard and its children
    page.tsx
    settings/page.tsx   # wrapped by dashboard layout AND root layout

Shunday qilib, /dashboard/settings dashboard layouti ichida render bo‘ladi, u esa o‘z navbatida root layout ichida render bo‘ladi. Umumiy dashboard UI (masalan, sidebar) bir marta app/dashboard/layout.tsx faylida joylashadi.

Sahifa sarlavhasini metadata bilan o‘rnatish

Brauzer yorlig‘i (tab) sarlavhasi, qidiruv tizimlari o‘qiydigan tavsif va ijtimoiy tarmoqlarda ulashish ma’lumotlari — barchasi metadata’dan keladi. App Router’da siz layout.tsx yoki page.tsx faylidan metadata obyektini eksport qilasiz:

// app/about/page.tsx
import type { Metadata } from "next";
 
export const metadata: Metadata = {
  title: "About us",
  description: "Learn more about our team.",
};
 
export default function AboutPage() {
  return <h1>About us</h1>;
}

Next.js buni sahifaning <head> qismidagi to‘g‘ri <title> va <meta> teglariga aylantiradi — siz <head> teglarini hech qachon qo‘lda yozmaysiz.

Dinamik sarlavhalar

Sarlavha ma’lumotga bog‘liq bo‘lganda (masalan, blog postining nomiga), statik obyekt o‘rniga async generateMetadata funksiyasini eksport qiling:

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  return { title: post.title };
}

Asosiy jihatlar

Layout sahifalarni o‘raydi va navigatsiya davomida saqlanib qoladi — umumiy UI’ni (header, nav) o‘sha yerga joylashtiring.
Root layout (app/layout.tsx) majburiy va u <html> hamda <body>’ni render qilishi shart.
Layoutlar papka bo‘yicha ichma-ich joylashadi, shuning uchun har bir bo‘lim o‘zining umumiy UI’sini qo‘sha oladi.
Yorliq sarlavhasi va SEO teglarini metadata (statik) yoki generateMetadata (dinamik) eksport qilish orqali o‘rnating — <head>’ni hech qachon qo‘lda yozmang.

Layout nima

Layout — bu layout.tsx faylidagi komponent bo‘lib, u children prop’ini oladi va uni render qiladi:

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <header>My Site</header>
        {children}          {/* the active page goes here */}
        <footer>© 2024</footer>
      </body>
    </html>
  );
}

Root layout majburiy

Ichma-ich (nested) layoutlar

app/
  layout.tsx            # wraps everything
  dashboard/
    layout.tsx          # wraps only /dashboard and its children
    page.tsx
    settings/page.tsx   # wrapped by dashboard layout AND root layout

Sahifa sarlavhasini metadata bilan o‘rnatish

// app/about/page.tsx
import type { Metadata } from "next";
 
export const metadata: Metadata = {
  title: "About us",
  description: "Learn more about our team.",
};
 
export default function AboutPage() {
  return <h1>About us</h1>;
}

Next.js buni sahifaning <head> qismidagi to‘g‘ri <title> va <meta> teglariga aylantiradi — siz <head> teglarini hech qachon qo‘lda yozmaysiz.

Dinamik sarlavhalar

Sarlavha ma’lumotga bog‘liq bo‘lganda (masalan, blog postining nomiga), statik obyekt o‘rniga async generateMetadata funksiyasini eksport qiling:

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  return { title: post.title };
}

Asosiy jihatlar

Layout sahifalarni o‘raydi va navigatsiya davomida saqlanib qoladi — umumiy UI’ni (header, nav) o‘sha yerga joylashtiring.
Root layout (app/layout.tsx) majburiy va u <html> hamda <body>’ni render qilishi shart.
Layoutlar papka bo‘yicha ichma-ich joylashadi, shuning uchun har bir bo‘lim o‘zining umumiy UI’sini qo‘sha oladi.
Yorliq sarlavhasi va SEO teglarini metadata (statik) yoki generateMetadata (dinamik) eksport qilish orqali o‘rnating — <head>’ni hech qachon qo‘lda yozmang.

Layout'lar va metadata

Layout nima

Root layout majburiy

Ichma-ich (nested) layoutlar

Sahifa sarlavhasini metadata bilan o‘rnatish

Dinamik sarlavhalar

Asosiy jihatlar

Layout'lar va metadata

Layout nima

Root layout majburiy

Ichma-ich (nested) layoutlar

Sahifa sarlavhasini metadata bilan o‘rnatish

Dinamik sarlavhalar

Asosiy jihatlar

Muhokama

Muhokama