M

MLOG

O'zbek

Mustahkam, kengaytiriladigan va global miqyosdagi ilovalarni yaratish uchun Next.js Layouts-dan qanday foydalanishni o'rganing. Umumiy UI komponentlari uchun eng yaxshi amaliyotlarni kashf eting.

Next.js Layouts: Global Ilovalar Uchun Umumiy UI Komponent Namunalarini O'zlashtirish

Next.js zamonaviy veb-dasturlashning asosiy toshiga aylandi va samarali hamda foydalanuvchilar uchun qulay ilovalarni yaratishni soddalashtirish qobiliyati bilan mashhur bo'ldi. Ushbu imkoniyatning markazida UI komponentlarini samarali boshqarish yotadi va buning asosini Next.js Layoutlarining kuchi tashkil etadi. Ushbu keng qamrovli qo'llanma mustahkam, kengaytiriladigan va global miqyosdagi ilovalarni yaratish uchun Next.js Layoutlaridan foydalanishning nozikliklariga chuqur kirib boradi. Biz kodning qayta ishlatilishini, saqlanishini va butun dunyo bo'ylab foydalanuvchilar uchun uzluksiz tajribani ta'minlaydigan umumiy UI komponentlarini yaratishning eng yaxshi amaliyotlarini ko'rib chiqamiz.

Next.js-da Layoutlarning ahamiyatini tushunish

Veb-dasturlash sohasida, ayniqsa Next.js kabi freymvorklarda, layoutlar sizning ilovangizning foydalanuvchi interfeysi quriladigan me'moriy asos bo'lib xizmat qiladi. Ular umumiy foydalanuvchi tajribasini shakllantiradigan izchil, qayta ishlatiladigan UI elementlari uchun chizmadir. Yaxshi tuzilgan dastur dizaynida layoutlar haqida o'ylash dasturchilarga kod takrorlanishidan qochishga va texnik xizmat ko'rsatishni soddalashtirishga imkon beradi. Aslini olganda, ular quyidagilar uchun asos yaratadi:

Next.js Layoutlarining Asosiy Tushunchalari va Afzalliklari

1. `_app.js` va `_document.js` Fayllari

Next.js-da ikkita maxsus fayl layoutlar va global sozlamalarni aniqlashda muhim rol o'ynaydi: `_app.js` va `_document.js`. Ularning maqsadini tushunish asosiy hisoblanadi.

2. Layoutlardan foydalanishning afzalliklari

Layoutlarni qo'llash, ayniqsa katta va murakkab veb-ilovalarni yaratishda ko'plab afzalliklarni taqdim etadi:

Umumiy UI Komponent Namunalarini Amalga Oshirish

1. Asosiy Layout Komponentini Yaratish

Keling, oddiy layout komponentini yaratamiz. Ushbu komponent header, asosiy kontent maydoni va footerni o'z ichiga oladi. U bir nechta sahifalar bo'ylab umumiy foydalanish uchun mo'ljallangan.

// components/Layout.js
import Head from 'next/head';

function Layout({ children, title }) {
  return (
    <>
      <Head>
        <title>{title} | Mening Ilovam</title>
        <meta name="description" content="Mening Next.js Ilovam" />
      </Head>
      <header>
        <h1>Ilovam Sarlavhasi</h1>
      </header>
      <main>{children}</main>
      <footer>
        <p>© {new Date().getFullYear()} Mening Ilovam. Barcha huquqlar himoyalangan.</p>
      </footer>
    </>
  );
}

export default Layout;

Bu misolda, `Layout` komponenti `children` va `title` ni props sifatida qabul qiladi. `children` layout ichida render qilinadigan sahifa kontentini ifodalaydi, `title` esa SEO uchun sahifaning sarlavha tegini o'rnatadi.

2. Layout Komponentini Sahifada Ishlatish

Endi, ushbu layoutni sahifalaringizdan biriga (masalan, `pages/index.js`) qo'llaymiz.

// pages/index.js
import Layout from '../components/Layout';

function HomePage() {
  return (
    <Layout title="Bosh sahifa">
      <h2>Bosh Sahifaga Xush Kelibsiz</h2>
      <p>Bu bosh sahifaning asosiy kontenti.</p>
    </Layout>
  );
}

export default HomePage;

`pages/index.js` da biz `Layout` komponentini import qilamiz va sahifa kontentini uning ichiga o'raymiz. Shuningdek, sahifaga xos `title` ni taqdim etamiz. `Layout` komponentidagi `children` prop `index.js` dagi `<Layout>` teglari orasidagi kontent bilan to'ldiriladi.

3. Kengaytirilgan Layout Xususiyatlari

Xalqaro Ilovalar Uchun Global Mulohazalar

Global auditoriya uchun layoutlar yaratayotganda, bir nechta internatsionallashtirish va globallashtirish (i18n/g11n) jihatlarini hisobga olish juda muhim. Ushbu amaliyotlar sizning ilovangizning turli madaniy kelib chiqishga ega bo'lgan shaxslar uchun qulay va foydalanuvchilar uchun do'stona bo'lishini ta'minlaydi.

1. Internatsionallashtirish (i18n) va Lokalizatsiya (l10n)

2. Next.js Layoutlarida i18n-ni Amalga Oshirish

Next.js-da i18n-ni amalga oshirish uchun siz `next-i18next` kabi turli kutubxonalardan yoki marshrutlashga asoslangan yechimlar uchun o'rnatilgan `next/router` dan foydalanishingiz mumkin.

Mana, `_app.js` faylidan foydalangan holda `next-i18next` bilan soddalashtirilgan misol. Bu ilova darajasida i18n-ni o'rnatadi. Kerakli paketlarni `npm install i18next react-i18next next-i18next` yordamida o'rnatganingizga ishonch hosil qiling. Ushbu misol soddalashtirilgan integratsiyani namoyish etadi va muayyan talablarga qarab o'zgartirishlarni talab qilishi mumkin.

// _app.js
import { appWithTranslation } from 'next-i18next';
import '../styles/global.css'; // Global uslublaringizni import qiling

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

Ushbu `_app.js` da `appWithTranslation` ilovaga internatsionallashtirish kontekstini taqdim etadi.

Keyin, layoutingizda `react-i18next` tomonidan taqdim etilgan `useTranslation` hookidan foydalaning:

// components/Layout.js
import { useTranslation } from 'react-i18next';
import Head from 'next/head';

function Layout({ children, title }) {
  const { t } = useTranslation(); // Tarjima funksiyasini olish

  return (
    <>
      <Head>
        <title>{t('layout.title', { title })}</title>
        <meta name="description" content={t('layout.description')} />
      </Head>
      <header>
        <h1>{t('layout.header')}</h1>
      </header>
      <main>{children}</main>
      <footer>
        <p>{t('layout.footer', { year: new Date().getFullYear() })}</p>
      </footer>
    </>
  );
}

export default Layout;

Keyin sizning tarjima fayllaringiz bo'ladi, ular odatda `public/locales/[locale]/[namespace].json` tuzilmasida saqlanadi. Masalan, `public/locales/uz/common.json` quyidagilarni o'z ichiga olishi mumkin:

{
  "layout": {
    "title": "{{title}} | Mening Ilovam",
    "description": "Mening Next.js Ilovam Tavsifi",
    "header": "Mening Ilovam Sarlavhasi",
    "footer": "© {{year}} Mening Ilovam. Barcha huquqlar himoyalangan."
  }
}

Va `public/locales/en/common.json` (ingliz tili uchun) quyidagilarni o'z ichiga olishi mumkin:

{
  "layout": {
    "title": "{{title}} | My App",
    "description": "My Next.js App Description",
    "header": "My App Header",
    "footer": "© {{year}} My App. All rights reserved."
  }
}

Eslatma: Ushbu misol i18n integratsiyasiga asosiy yondashuvni taqdim etadi va qo'shimcha konfiguratsiyani (masalan, tilni aniqlash, marshrutlashni sozlash) talab qiladi. To'liq yo'l-yo'riq uchun `next-i18next` hujjatlariga murojaat qiling.

3. Moslashuvchan Dizayn va Layoutlar

Moslashuvchan dizayn global auditoriya uchun juda muhimdir. Sizning layoutingiz turli ekran o'lchamlari va qurilmalarga moslashishi kerak. Barcha qurilmalarda izchil va foydalanuvchilar uchun qulay tajribani ta'minlash uchun Bootstrap, Tailwind CSS kabi CSS freymvorklaridan foydalaning yoki maxsus media so'rovlarini yarating.

4. Foydalanish Qulayligi Mulohazalari

Ilovangizni nogironligi bo'lgan odamlar uchun foydalanishga yaroqli qilish uchun foydalanish qulayligi bo'yicha ko'rsatmalarga (WCAG) rioya qiling. Bunga quyidagilar kiradi:

5. Sana va Vaqt Formatlash

Turli mintaqalar sana va vaqt formatlari uchun turli xil qoidalarga ega. Sanalar va vaqtlar foydalanuvchining lokaliga qarab to'g'ri ko'rsatilishiga ishonch hosil qiling. `date-fns` kabi kutubxonalar yoki JavaScript-dagi o'rnatilgan `Intl` API bu vazifani bajara oladi.

import { format } from 'date-fns';
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { i18n } = useTranslation();
  const currentDate = new Date();
  const formattedDate = format(currentDate, 'MMMM d, yyyy', { locale: i18n.language });

  return <p>{formattedDate}</p>;
}

6. Valyuta Formatlash

Pul qiymatlarini har bir lokal uchun to'g'ri formatda ko'rsating. `Intl.NumberFormat` API valyuta formatlashni boshqarish uchun juda qimmatlidir.

function MyComponent() {
  const { i18n } = useTranslation();
  const price = 1234.56;
  const formattedPrice = new Intl.NumberFormat(i18n.language, { // Lokal uchun i18n.language dan foydalanish
    style: 'currency',
    currency: 'USD', // Yoki foydalanuvchi sozlamalariga qarab valyutani dinamik aniqlash
  }).format(price);

  return <p>{formattedPrice}</p>
}

7. O'ngdan-Chapga (RTL) Yoziladigan Tillar

Agar ilovangiz arab yoki ibroniy kabi (RTL) tillarni qo'llab-quvvatlashi kerak bo'lsa, layoutingizni bunga mos ravishda loyihalashtiring. `direction: rtl;` kabi CSS xususiyatlaridan foydalanishni va UI elementlarining joylashuvini sozlashni ko'rib chiqing.

8. Kontent Yetkazib Berish Tarmoqlari (CDN) va Unumdorlik

Ilovangizning statik aktivlarini (rasmlar, CSS, JavaScript) foydalanuvchilaringizga geografik jihatdan yaqinroq serverlardan yetkazib berish uchun CDN dan foydalaning. Bu kechikishni kamaytiradi va xalqaro foydalanuvchilar uchun sahifa yuklanish vaqtini yaxshilaydi. Next.js-ning o'rnatilgan rasm optimallashtirish va CDN integratsiyasi unumdorlikni sezilarli darajada yaxshilashi mumkin.

9. Global Bozorlar Uchun SEO Optimallashtirish

Qidiruv tizimini optimallashtirish (SEO) butun dunyo bo'ylab foydalanuvchilarni jalb qilish uchun juda muhimdir. Quyidagi usullardan foydalaning:

`Layout` komponentingizning <head> qismidagi hreflang teglariga misol:


<Head>
  <title>{t('layout.title', { title })}</title>
  <meta name="description" content={t('layout.description')} />
  <link rel="alternate" href="https://www.example.com/" hreflang="x-default" />
  <link rel="alternate" href="https://www.example.com/uz/" hreflang="uz" />
  <link rel="alternate" href="https://www.example.com/en/" hreflang="en" />
  // Boshqa til variantlari
</Head>

Kengaytirilgan Layout Strategiyalari

1. Layoutlar Bilan Kodni Bo'lish (Code Splitting)

Next.js unumdorlikni oshirish uchun avtomatik ravishda kodni bo'lishni amalga oshiradi, lekin siz bu xatti-harakatni dinamik importlar yordamida, ayniqsa layoutlaringiz ichida, nozik sozlashingiz mumkin. Katta hajmdagi komponentlarni dinamik ravishda import qilish orqali siz dastlabki JavaScript to'plami hajmini kamaytirishingiz mumkin, bu esa dastlabki yuklanish vaqtining tezlashishiga olib keladi.


import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/LargeComponent'));

function Layout({ children }) {
  return (
    <>
      <header>...</header>
      <main>
        {children}
        <DynamicComponent />  <!-- Dinamik yuklangan komponent -->
      </main>
      <footer>...</footer>
    </>
  );
}

Bu misolda, `LargeComponent` dinamik ravishda yuklanadi. Dinamik import ushbu komponentni yuklab olishni u haqiqatda kerak bo'lgunga qadar kechiktiradi.

2. Server Tomonida Renderlash (SSR) Bilan Layoutlar

Next.js-ning SSR imkoniyatlari sizga kontentni serverda oldindan renderlash imkonini beradi, bu esa SEO va dastlabki yuklanish vaqtlarini yaxshilaydi. Siz sahifa mijozga yetkazilishidan oldin ma'lumotlarni olish uchun layoutlaringiz ichida SSR-ni amalga oshirishingiz mumkin. Bu, ayniqsa, tez-tez o'zgarib turadigan yoki qidiruv tizimlari tomonidan indekslanishi kerak bo'lgan kontent uchun muhimdir.

Sahifa ichida `getServerSideProps` dan foydalanib, siz layoutga ma'lumotlarni uzatishingiz mumkin:


// pages/posts/[id].js
import Layout from '../../components/Layout';

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

function PostPage({ post }) {
  return (
    <Layout title={post.title}>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </Layout>
  );
}

export default PostPage;

`getServerSideProps` funksiyasi post ma'lumotlarini oladi. Keyin `post` ma'lumotlari `Layout`ga prop sifatida uzatiladi.

3. Statik Sayt Generatsiyasi (SSG) Bilan Layoutlar

Tez-tez o'zgarmaydigan kontent uchun SSG sezilarli unumdorlik afzalliklarini taqdim etadi. U sahifalarni qurish vaqtida oldindan renderlaydi va to'g'ridan-to'g'ri foydalanuvchiga taqdim etiladigan statik HTML fayllarini yaratadi. SSG-dan foydalanish uchun sahifa komponentlaringizda `getStaticProps` funksiyasini amalga oshiring va ma'lumotlar layoutga uzatilishi mumkin.


// pages/about.js
import Layout from '../components/Layout';

export async function getStaticProps() {
  const aboutData = { title: 'Biz Haqimizda', content: 'Kompaniyamiz haqida ba\'zi ma\'lumotlar.' };
  return {
    props: {
      aboutData,
    },
  };
}

function AboutPage({ aboutData }) {
  return (
    <Layout title={aboutData.title}>
      <h2>{aboutData.title}</h2>
      <p>{aboutData.content}</p>
    </Layout>
  );
}

export default AboutPage;

Ushbu SSG misolida, `getStaticProps` qurish vaqtida ma'lumotlarni oladi va keyin uni `Layout` komponentidan foydalanib render qilinadigan `AboutPage` ga uzatadi.

4. Ichma-ich Joylashgan Layoutlar

Murakkab ilovalar uchun sizga ichma-ich joylashgan layoutlar kerak bo'lishi mumkin. Bu layoutlar ichida layoutlarga ega bo'lishni anglatadi. Masalan, sizda asosiy ilova layouti bo'lishi mumkin va keyin veb-saytingizning ma'lum bo'limlari uchun turli layoutlardan foydalanishingiz mumkin. Bu foydalanuvchi interfeysi ustidan nozik nazorat qilish imkonini beradi.


// components/MainLayout.js
function MainLayout({ children }) {
  return (
    <>
      <header>Asosiy Sarlavha</header>
      <main>{children}</main>
      <footer>Asosiy Futer</footer>
    </>
  );
}

export default MainLayout;


// components/SectionLayout.js
function SectionLayout({ children }) {
  return (
    <div className="section-wrapper">
      <aside>Bo'lim Navigatsiyasi</aside>
      <div className="section-content">{children}</div>
    </div>
  );
}

export default SectionLayout;


// pages/section/[page].js
import MainLayout from '../../components/MainLayout';
import SectionLayout from '../../components/SectionLayout';

function SectionPage({ page }) {
  return (
    <MainLayout>
      <SectionLayout>
        <h1>Bo'lim Sahifasi: {page}</h1>
        <p>{page} bo'lim sahifasi uchun kontent.</p>
      </SectionLayout>
    </MainLayout>
  );
}

export async function getServerSideProps(context) {
  const { page } = context.query;
  return {
    props: {
      page,
    },
  };
}

export default SectionPage;

Bu holda, `SectionPage` ichma-ich joylashgan layout tuzilmasini yaratish uchun ham `MainLayout`, ham `SectionLayout` tomonidan o'ralgan.

Eng Yaxshi Amaliyotlar va Optimallashtirish Bo'yicha Maslahatlar

1. Komponentlar Kompozitsiyasi

Komponentlar kompozitsiyasidan foydalaning. Layoutlaringiz va UI elementlaringizni kichikroq, qayta ishlatiladigan komponentlarga ajrating. Bu kodning o'qilishi va saqlanishini yaxshilaydi.

2. Unumdorlik Monitoringi

Google Lighthouse yoki WebPageTest kabi vositalar yordamida layoutlaringiz va ilovangizning unumdorligini doimiy ravishda kuzatib boring. Ushbu vositalar sizga unumdorlikdagi to'siqlarni va optimallashtirish uchun joylarni aniqlashga yordam beradi.

3. Keshlashtirish Strategiyalari

Server yukini kamaytirish va javob vaqtlarini yaxshilash uchun keshlashtirish strategiyalarini amalga oshiring. Tez-tez murojaat qilinadigan ma'lumotlarni keshlashtirishni, statik aktivlar uchun brauzer keshidan foydalanishni va kontentni foydalanuvchiga yaqinroq keshlashtirish uchun Kontent Yetkazib Berish Tarmog'ini (CDN) joriy etishni ko'rib chiqing.

4. Kechiktirilgan Yuklash (Lazy Loading)

Rasmlar va boshqa muhim bo'lmagan komponentlar uchun kechiktirilgan yuklashni qo'llang. Ushbu yondashuv resurslarni kerak bo'lgunga qadar yuklashni kechiktiradi, bu esa dastlabki sahifa yuklanish vaqtini qisqartiradi.

5. Ortiqcha Qayta Renderlardan Saqlaning

Keraksiz qayta renderlardan qochish uchun komponentlaringizni optimallashtiring. Komponentlar va funksiyalarni yodda saqlash uchun `React.memo`, `useMemo` va `useCallback` dan foydalaning. React-ga o'zgarishlarni samarali aniqlashga yordam berish uchun komponentlar ro'yxatini renderlashda `key` propidan to'g'ri foydalaning.

6. Testlash

Layout komponentlaringizning kutilganidek ishlashini va izchil xatti-harakatni saqlashini ta'minlash uchun birlik testlari va integratsiya testlari kabi sinchkovlik bilan testlashni amalga oshiring. Layoutlarni turli ekran o'lchamlari va lokallarda sinab ko'ring.

Xulosa

Next.js Layoutlari ajoyib veb-ilovalarni yaratish uchun kuchli va ko'p qirrali vositalarni taklif etadi. Ushbu qo'llanmada muhokama qilingan usullarni o'zlashtirib, siz yaxshi tuzilgan, saqlanadigan va samarali UI-larni yaratishingiz mumkin. Ilovangiz global auditoriyaga mos kelishini ta'minlash uchun internatsionallashtirish va globallashtirishning eng yaxshi amaliyotlarini qo'llashni unutmang. Next.js kuchini layoutlarga puxta yondashuv bilan birlashtirib, siz zamonaviy, kengaytiriladigan va universal foydalanish mumkin bo'lgan veb-tajribalarni yaratishga tayyor bo'lasiz.