M

MLOG

O'zbek

Faqat mijoz tomonida ishlaydigan ilovalar uchun Next.js statik eksportlarini o'rganing. Tez, xavfsiz va global miqyosda mavjud veb-tajribalarni yaratishning afzalliklari, cheklovlari, sozlash va ilg'or usullarini bilib oling.

Next.js statik eksportlari: Faqat mijoz tomonida ishlaydigan ilovalar yaratish

Next.js - bu dasturchilarga yuqori unumdorlikka ega, kengaytiriladigan va SEO-ga mos veb-ilovalar yaratish imkonini beruvchi kuchli React freymvorkidir. Next.js server tomonida renderlash (SSR) va statik sayt generatsiyasi (SSG) imkoniyatlari bilan mashhur bo'lsa-da, u statik eksportlar yordamida faqat mijoz tomonida ishlaydigan ilovalar yaratish uchun moslashuvchanlikni ham taklif etadi. Ushbu yondashuv sizga Next.js-ning asboblari va tuzilmasidan foydalangan holda to'liq mijoz tomonida ishlaydigan ilovani joylashtirish imkonini beradi. Ushbu maqola sizga Next.js statik eksportlari yordamida faqat mijoz tomonida ishlaydigan ilovalar yaratish haqida bilishingiz kerak bo'lgan barcha narsalarni, jumladan afzalliklari, cheklovlari, sozlash jarayoni va ilg'or usullarini o'rgatadi.

Next.js statik eksportlari nima?

Next.js-dagi statik eksportlar - bu qurish (build) jarayonida ilovangizning to'liq statik versiyasini yaratish jarayonidir. Bu shuni anglatadiki, barcha HTML, CSS va JavaScript fayllari oldindan renderlanadi va to'g'ridan-to'g'ri statik fayl serveridan (masalan, Netlify, Vercel, AWS S3 yoki an'anaviy veb-server) xizmat ko'rsatishga tayyor bo'ladi. Serverda renderlanadigan ilovalardan farqli o'laroq, kiruvchi so'rovlarni qayta ishlash uchun Node.js serveri talab qilinmaydi. Buning o'rniga, butun ilova statik aktivlar to'plami sifatida yetkazib beriladi.

Faqat mijoz tomonida ishlaydigan ilovani maqsad qilganda, Next.js ushbu statik aktivlarni barcha dinamik xatti-harakatlar mijoz tomonidagi JavaScript tomonidan boshqariladi degan taxmin bilan yaratadi. Bu, asosan, mijoz tomonida marshrutlash, API so'rovlari va foydalanuvchi o'zaro ta'sirlariga tayanadigan Yagona Sahifali Ilovalar (SPA) uchun ayniqsa foydalidir.

Nima uchun mijoz tomonidagi ilovalar uchun statik eksportlarni tanlash kerak?

Next.js statik eksportlari yordamida mijoz tomonidagi ilovalarni yaratish bir nechta jozibador afzalliklarni taklif etadi:

Statik eksportlarning cheklovlari

Statik eksportlar ko'plab afzalliklarni taklif qilsa-da, ularning cheklovlaridan xabardor bo'lish muhim:

Next.js-ni statik eksportlar uchun sozlash

Next.js-ni statik eksportlar uchun sozlash bo'yicha bosqichma-bosqich qo'llanma:

1. Yangi Next.js loyihasini yaratish

Agar sizda hali Next.js loyihasi bo'lmasa, quyidagi buyruq yordamida yangisini yarating:

npx create-next-app my-client-app

Sozlash jarayonida ehtiyojlaringizga eng mos keladigan variantlarni tanlang (masalan, TypeScript, ESLint).

2. `next.config.js` faylini sozlash

Loyihangizning ildiz papkasidagi `next.config.js` faylini oching va quyidagi konfiguratsiyani qo'shing:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  // Ixtiyoriy: Havolalarni `/me` -> `/me/` ga o'zgartirish va `/me.html` -> `/me/index.html` ni yaratish
  // qarang https://nextjs.org/docs/app/api-reference/next-config#trailing-slash
  // experimental:
  //  {appDir: false}
}

module.exports = nextConfig

`output: 'export'` opsiyasi Next.js-ga ilovangizning statik eksportini yaratishni bildiradi. `trailingSlash: true` ni o'rnatish odatda URL tuzilmasining izchilligini ta'minlash va potentsial SEO muammolarini oldini olish uchun tavsiya etiladi.

3. `package.json` faylini yangilash

Statik eksportlar uchun qurish skriptini qo'shish uchun `package.json` faylingizdagi `scripts` bo'limini o'zgartiring:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  }
}

Ushbu skript avval Next.js ilovangizni quradi va keyin uni statik katalogga eksport qiladi.

4. Mijoz tomonida marshrutlashni joriy etish

Siz mijoz tomonida ishlaydigan ilova yaratayotganingiz uchun, `next/router` moduli yoki `react-router-dom` kabi uchinchi tomon kutubxonasi yordamida mijoz tomonida marshrutlashni joriy etishingiz kerak bo'ladi. Mana `next/router` yordamida bir misol:

import { useRouter } from 'next/router';
import Link from 'next/link';

function HomePage() {
  const router = useRouter();

  const handleClick = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>Bosh sahifa</h1>
      <p>Bosh sahifaga xush kelibsiz!</p>
      <button onClick={handleClick}>Haqida sahifasiga o'tish</button>

      <Link href="/about">
         <a>Haqida sahifasiga o'tish (Link orqali)</a>
      </Link>
    </div>
  );
}

export default HomePage;

Mijoz tomonida silliq o'tishlarni ta'minlash uchun ichki navigatsiya uchun `next/link` dan `Link` komponentidan foydalanishni unutmang.

5. Ma'lumotlarni mijoz tomonida olish

Mijoz tomonidagi ilovada barcha ma'lumotlarni olish `useEffect` yoki `useState` kabi hooklardan foydalangan holda mijoz tomonida amalga oshirilishi kerak. Masalan:

import { useState, useEffect } from 'react';

function DataPage() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error(`HTTP xatosi! status: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) return <p>Yuklanmoqda...</p>;
  if (error) return <p>Xatolik: {error.message}</p>;
  if (!data) return <p>Ko'rsatish uchun ma'lumot yo'q</p>;

  return (
    <div>
      <h1>Ma'lumotlar sahifasi</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataPage;

6. Ilovangizni qurish va eksport qilish

Statik eksportni yaratish uchun qurish skriptini ishga tushiring:

npm run build

Bu sizning ilovangiz uchun statik HTML, CSS va JavaScript fayllarini o'z ichiga olgan `out` (yoki Next.js versiyasiga qarab `public`) katalogini yaratadi.

7. Statik saytingizni joylashtirish

Endi siz `out` katalogining tarkibini Netlify, Vercel, AWS S3 yoki GitHub Pages kabi statik xosting provayderiga joylashtirishingiz mumkin. Ko'pgina provayderlar jarayonni avtomatlashtirish uchun oddiy sudrab-tashlash (drag-and-drop) yoki buyruqlar qatori vositalarini taklif qilishadi.

Mijoz tomonidagi Next.js ilovalari uchun ilg'or usullar

Mijoz tomonidagi Next.js ilovalaringizni optimallashtirish uchun ba'zi ilg'or usullar:

1. Kodni bo'lish va kechiktirilgan yuklash (Lazy Loading)

Kodingizni talab bo'yicha yuklanadigan kichikroq qismlarga bo'lish uchun dinamik importlardan (`import()`) foydalaning. Bu, ayniqsa, katta ilovalar uchun dastlabki yuklash vaqtini sezilarli darajada yaxshilashi mumkin.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function MyPage() {
  return (
    <Suspense fallback={<div>Yuklanmoqda...</div>}>
      <MyComponent />
    </Suspense>
  );
}

2. Tasvirlarni optimallashtirish

`next/image` komponentidan tasvirlarni optimallashtirish uchun foydalaning. Ushbu komponent turli qurilmalar va ekran o'lchamlari uchun tasvirlarni avtomatik ravishda optimallashtiradi, bu esa unumdorlik va foydalanuvchi tajribasini yaxshilaydi. U kechiktirilgan yuklash, moslashuvchan tasvirlar va turli xil tasvir formatlarini qo'llab-quvvatlaydi.

import Image from 'next/image';

function MyComponent() {
  return (
    <Image
      src="/images/my-image.jpg"
      alt="Mening rasmim"
      width={500}
      height={300}
    />
  );
}

3. Servis ishchilari (Service Workers)

Oflayn funksionallikni yoqish va unumdorlikni oshirish uchun servis ishchisini joriy eting. Servis ishchisi fonda ishlaydigan va tarmoq so'rovlarini ushlab turadigan, aktivlarni keshlashi va bildirishnomalarni yuborishi mumkin bo'lgan skriptdir. `next-pwa` kabi kutubxonalar Next.js ilovangizga servis ishchisini qo'shish jarayonini soddalashtirishi mumkin.

4. Muhit o'zgaruvchilari

Ilovangizni turli muhitlar (masalan, ishlab chiqish, sinov, ishga tushirish) uchun sozlash uchun muhit o'zgaruvchilaridan foydalaning. Next.js `.env` fayli va `process.env` ob'ekti orqali muhit o'zgaruvchilari uchun o'rnatilgan yordamni taqdim etadi. Maxfiy ma'lumotlarni mijoz tomonidagi kodda oshkor qilmaslikdan ehtiyot bo'ling. Muhit o'zgaruvchilarini asosan oshkor qilish xavfsiz bo'lgan konfiguratsiya sozlamalari uchun ishlating.

5. Monitoring va tahlil

Unumdorlik ko'rsatkichlarini kuzatish, xatolarni aniqlash va foydalanuvchi xatti-harakatlari haqida tushunchaga ega bo'lish uchun monitoring va tahlil xizmatini (masalan, Google Analytics, Sentry yoki New Relic) integratsiya qiling. Bu sizga ilovangizni optimallashtirish va vaqt o'tishi bilan foydalanuvchi tajribasini yaxshilashga yordam beradi.

6. Mijoz tomonidagi ilovalarda SEO uchun optimallashtirish

Statik eksportlar dastlabki HTML tuzilmasini ta'minlasa-da, mijoz tomonida ko'p ishlaydigan ilovalarda yaxshiroq SEO uchun ushbu strategiyalarni ko'rib chiqing:

Xalqarolashtirish (i18n) mulohazalari

Global auditoriya uchun mijoz tomonidagi ilovani yaratishda xalqarolashtirish (i18n) juda muhim. Mana bir nechta eng yaxshi amaliyotlar:

To'g'ri yondashuvni tanlash: Statik eksport va server tomonida renderlash

Statik eksport yoki server tomonida renderlashdan foydalanish to'g'risida qaror qabul qilish ilovangizning o'ziga xos talablariga bog'liq. Quyidagi omillarni ko'rib chiqing:

Haqiqiy hayotdan misollar

Next.js statik eksportlaridan foyda ko'rishi mumkin bo'lgan ba'zi haqiqiy hayotdan misollar:

Misol: Xalqaro kompaniya veb-sayti

Nyu-York, London va Tokioda ofislari bo'lgan kompaniyani tasavvur qiling. Ular ingliz, fransuz va yapon tillarida mavjud veb-saytni xohlashadi. Next.js statik eksporti, boshsiz CMS va i18n kutubxonalari bilan birgalikda ideal bo'lishi mumkin. CMS tarjima qilingan tarkibni saqlaydi, Next.js uni mijoz tomonida olib renderlaydi va statik sayt tez kirish uchun global miqyosda CDN-da joylashtirilishi mumkin.

Xulosa

Next.js statik eksportlari Next.js freymvorkining afzalliklaridan foydalangan holda faqat mijoz tomonida ishlaydigan ilovalar yaratishning kuchli usulini taqdim etadi. Afzalliklar, cheklovlar, sozlash jarayoni va ilg'or usullarni tushunib, siz o'zingizning maxsus talablaringizga javob beradigan tez, xavfsiz va global miqyosda mavjud veb-tajribalarni yaratishingiz mumkin. Oddiy kirish sahifasi yoki murakkab SPA yaratayotgan bo'lsangiz ham, statik eksportlar veb-dasturlash arsenalingizda qimmatli vosita bo'lishi mumkin.