Styling va asset'lar

Global styles

Har bir ilovaga sayt bo‘ylab ishlaydigan biroz CSS kerak bo‘ladi — reset’lar, asosiy shriftlar, ranglar. Uni oddiy .css faylga joylashtiring va root layout’ingizda bir marta import qiling:

// app/layout.tsx
import "./globals.css";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

globals.css ichidagi hamma narsa butun ilovaga qo‘llaniladi. Uni kichik saqlang — asosan asosiy uslublar — va komponentga xos stil uchun CSS Modules’dan (quyida) foydalaning.

CSS Modules — scoped styles

CSS Module — bu klass nomlari avtomatik ravishda noyob qilinadigan stil varag‘i bo‘lib, ular boshqa joydagi stillar bilan to‘qnashib qolmaydi. Faylni something.module.css deb nomlang:

/* button.module.css */
.primary {
  background: blue;
  color: white;
}

Uni obyekt sifatida import qiling va klass nomlaridan xususiyat sifatida foydalaning:

import styles from "./button.module.css";
 
export default function Button() {
  return <button className={styles.primary}>Save</button>;
}

Endi .primary faqat shu komponentga ta’sir qiladi — hatto boshqa fayl o‘zining .primary klassini aniqlagan bo‘lsa ham, ular to‘qnashmaydi.

Optimized images with the Image component

Oddiy <img> o‘rniga Next.js’ning Image komponentidan foydalaning. U rasmlarni avtomatik o‘lchamlaydi, zamonaviy formatlarda uzatadi va ekrandan tashqaridagi rasmlarni lazy-load qiladi — bularning barchasi sahifangizni tezlashtiradi:

import Image from "next/image";
 
export default function Avatar() {
  return <Image src="/me.jpg" alt="My photo" width={80} height={80} />;
}

width va height berilishi Next.js’ga joy ajratib qo‘yish imkonini beradi, shuning uchun rasmlar yuklanayotganda sahifa u yoq-bu yoqqa sakramaydi.

Optimized fonts

next/font yordamchisi shriftlarni samarali yuklaydi va uslublanmagan matnning miltillashining oldini oladi. Uni bir marta, odatda root layout’da sozlang:

import { Inter } from "next/font/google";
 
const inter = Inter({ subsets: ["latin"] });
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</

Shrift avtomatik ravishda o‘zingizning hosting’ingizda saqlanadi — Google’ga qo‘shimcha tarmoq so‘rovi yo‘q, bu tezroq va maxfiylik uchun yaxshiroq.

Static files in public/

O‘zi bo‘yicha uzatishni xohlagan fayllaringiz uchun — rasmlar, ikonkalar, favicon.ico, PDF — ularni public/ papkasiga tashlang. Ular root URL’da mavjud bo‘ladi:

public/
  logo.png      ->  available at /logo.png

<img src="/logo.png" alt="Logo" />

E’tibor bering, yo‘l /public/ emas, balki / dan boshlanadi — public papka nomi URL’ning bir qismi emas.

Key points

Root layout’da global CSS’ni bir marta import qiling; uni minimal saqlang.
CSS Modules (*.module.css) klass nomlarini komponentga scope qiladi, shuning uchun stillar hech qachon to‘qnashmaydi.
Avtomatik o‘lchamlash, lazy loading va zamonaviy formatlar uchun Image komponentidan foydalaning.
Shriftlarni next/font bilan yuklang, bu ularni o‘z hosting’ingizda saqlaydi va layout shift’ning oldini oladi.
Statik asset’larni public/ ga joylashtiring; ular root URL’dan uzatiladi (masalan, /logo.png).

Global styles

// app/layout.tsx
import "./globals.css";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

globals.css ichidagi hamma narsa butun ilovaga qo‘llaniladi. Uni kichik saqlang — asosan asosiy uslublar — va komponentga xos stil uchun CSS Modules’dan (quyida) foydalaning.

CSS Modules — scoped styles

CSS Module — bu klass nomlari avtomatik ravishda noyob qilinadigan stil varag‘i bo‘lib, ular boshqa joydagi stillar bilan to‘qnashib qolmaydi. Faylni something.module.css deb nomlang:

/* button.module.css */
.primary {
  background: blue;
  color: white;
}

Uni obyekt sifatida import qiling va klass nomlaridan xususiyat sifatida foydalaning:

import styles from "./button.module.css";
 
export default function Button() {
  return <button className={styles.primary}>Save</button>;
}

Endi .primary faqat shu komponentga ta’sir qiladi — hatto boshqa fayl o‘zining .primary klassini aniqlagan bo‘lsa ham, ular to‘qnashmaydi.

Optimized images with the Image component

import Image from "next/image";
 
export default function Avatar() {
  return <Image src="/me.jpg" alt="My photo" width={80} height={80} />;
}

width va height berilishi Next.js’ga joy ajratib qo‘yish imkonini beradi, shuning uchun rasmlar yuklanayotganda sahifa u yoq-bu yoqqa sakramaydi.

Optimized fonts

next/font yordamchisi shriftlarni samarali yuklaydi va uslublanmagan matnning miltillashining oldini oladi. Uni bir marta, odatda root layout’da sozlang:

import { Inter } from "next/font/google";
 
const inter = Inter({ subsets: ["latin"] });
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</

Shrift avtomatik ravishda o‘zingizning hosting’ingizda saqlanadi — Google’ga qo‘shimcha tarmoq so‘rovi yo‘q, bu tezroq va maxfiylik uchun yaxshiroq.

Static files in public/

O‘zi bo‘yicha uzatishni xohlagan fayllaringiz uchun — rasmlar, ikonkalar, favicon.ico, PDF — ularni public/ papkasiga tashlang. Ular root URL’da mavjud bo‘ladi:

public/
  logo.png      ->  available at /logo.png

<img src="/logo.png" alt="Logo" />

E’tibor bering, yo‘l /public/ emas, balki / dan boshlanadi — public papka nomi URL’ning bir qismi emas.

Key points

Root layout’da global CSS’ni bir marta import qiling; uni minimal saqlang.
CSS Modules (*.module.css) klass nomlarini komponentga scope qiladi, shuning uchun stillar hech qachon to‘qnashmaydi.
Avtomatik o‘lchamlash, lazy loading va zamonaviy formatlar uchun Image komponentidan foydalaning.
Shriftlarni next/font bilan yuklang, bu ularni o‘z hosting’ingizda saqlaydi va layout shift’ning oldini oladi.
Statik asset’larni public/ ga joylashtiring; ular root URL’dan uzatiladi (masalan, /logo.png).

Styling va asset'lar

Global styles

CSS Modules — scoped styles

Optimized images with the Image component

Optimized fonts

Static files in public/

Key points

Styling va asset'lar

Global styles

CSS Modules — scoped styles

Optimized images with the Image component

Optimized fonts

Static files in public/

Key points

Muhokama

Muhokama