Next.js 14 Server Actions: Shakllarni Boshqarishning Eng Yaxshi Amaliyotlarini O'zlashtirish

Next.js 14 yuqori unumdorlikka ega va foydalanuvchiga qulay veb-ilovalar yaratish uchun kuchli funksiyalarni taqdim etadi. Ular orasida Server Actions shakllarni yuborish va ma'lumotlar mutatsiyalarini to'g'ridan-to'g'ri serverda boshqarishning o'zgartiruvchi usuli sifatida ajralib turadi. Ushbu qo'llanma Next.js 14'dagi Server Actions'ni to'liq qamrab oladi, bunda shakllarni boshqarish, ma'lumotlarni tekshirish, xavfsizlik va ilg'or usullarning eng yaxshi amaliyotlariga e'tibor qaratiladi. Biz mustahkam va kengaytiriladigan veb-ilovalar yaratishingizga yordam berish uchun amaliy misollarni ko'rib chiqamiz va amaliy tushunchalar beramiz.

Next.js Server Actions nima?

Server Actions — bu serverda ishlaydigan va React komponentlaridan to'g'ridan-to'g'ri chaqirilishi mumkin bo'lgan asinxron funksiyalardir. Ular shakllarni yuborish va ma'lumotlar mutatsiyalarini boshqarish uchun an'anaviy API yo'nalishlariga bo'lgan ehtiyojni yo'qotadi, bu esa kodni soddalashtirish, xavfsizlikni yaxshilash va unumdorlikni oshirishga olib keladi. Server Actions React Server Components (RSC) hisoblanadi, ya'ni ular serverda bajariladi, bu esa sahifaning dastlabki yuklanishini tezlashtiradi va SEO'ni yaxshilaydi.

Server Actions'ning asosiy afzalliklari:

• Soddalashtirilgan kod: Alohida API yo'nalishlariga ehtiyojni yo'qotib, ortiqcha kodni kamaytiring.
• Yaxshilangan xavfsizlik: Server tomonida bajarilish mijoz tomonidagi zaifliklarni minimallashtiradi.
• Oshirilgan unumdorlik: Tezroq javob vaqtlari uchun ma'lumotlar mutatsiyalarini to'g'ridan-to'g'ri serverda bajaring.
• Optimallashtirilgan SEO: Qidiruv tizimlarida yaxshiroq indekslanish uchun server tomonida renderingdan foydalaning.
• Tiplar xavfsizligi: TypeScript yordamida to'liq (end-to-end) tiplar xavfsizligidan foydalaning.

Next.js 14 Loyihangizni Sozlash

Server Actions'ni o'rganishdan oldin, Next.js 14 loyihangiz sozlanganligiga ishonch hosil qiling. Agar noldan boshlayotgan bo'lsangiz, quyidagi buyruq yordamida yangi loyiha yarating:

            npx create-next-app@latest my-next-app
            

              
                Copy
              
            
          

Loyihangiz Server Komponentlari va Actions'dan to'liq foydalanish uchun app katalog tuzilmasidan foydalanayotganiga ishonch hosil qiling.

Server Actions Yordamida Asosiy Shakllarni Boshqarish

Keling, oddiy misoldan boshlaymiz: ma'lumotlar bazasida yangi element yaratish uchun ma'lumot yuboradigan shakl. Biz oddiy shakldan, kiritish maydoni va yuborish tugmasidan foydalanamiz.

Misol: Yangi Element Yaratish

Birinchi navbatda, React komponentingiz ichida Server Action funksiyasini aniqlang. Ushbu funksiya serverda shaklni yuborish mantig'ini boshqaradi.

            // app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // Ma'lumotlar bazasi bilan o'zaro ta'sirni simulyatsiya qilish
  console.log('Element yaratilmoqda:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Kechikishni simulyatsiya qilish

  console.log('Element muvaffaqiyatli yaratildi!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    await createItem(formData);
    setIsSubmitting(false);
  }

  return (
    

      Element nomi:
      
      
        {isSubmitting ? 'Yaratilmoqda...' : 'Element yaratish'}
      
    
  );
}

            

              
                Copy
              
            
          

Tushuntirish:

• 'use client' direktivasi bu mijoz komponenti ekanligini bildiradi.
• createItem funksiyasi 'use server' direktivasi bilan belgilangan, bu uning Server Action ekanligini ko'rsatadi.
• handleSubmit funksiyasi server harakatini chaqiradigan mijoz tomonidagi funksiyadir. U shuningdek, yuborish paytida tugmani o'chirish kabi UI holatini boshqaradi.
• <form> elementining action xususiyati handleSubmit funksiyasiga o'rnatilgan.
• formData.get('name') usuli 'name' kiritish maydonining qiymatini oladi.
• await new Promise ma'lumotlar bazasi operatsiyasini simulyatsiya qiladi va kechikish qo'shadi.

Ma'lumotlarni Tekshirish

Ma'lumotlarni tekshirish ma'lumotlar yaxlitligini ta'minlash va xavfsizlik zaifliklarini oldini olish uchun juda muhimdir. Server Actions server tomonida tekshirishni amalga oshirish uchun ajoyib imkoniyat yaratadi. Ushbu yondashuv faqat mijoz tomonidagi tekshirish bilan bog'liq xavflarni kamaytirishga yordam beradi.

Misol: Kiritilgan Ma'lumotlarni Tekshirish

createItem Server Action'ini tekshirish mantig'ini qo'shish uchun o'zgartiring.

            // app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  if (!name || name.length < 3) {
    throw new Error("Element nomi kamida 3 belgidan iborat bo'lishi kerak.");
  }

  // Ma'lumotlar bazasi bilan o'zaro ta'sirni simulyatsiya qilish
  console.log('Element yaratilmoqda:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Kechikishni simulyatsiya qilish

  console.log('Element muvaffaqiyatli yaratildi!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Xatolik yuz berdi.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    

      

        Element nomi:
        
        
          {isSubmitting ? 'Yaratilmoqda...' : 'Element yaratish'}
        
      
      {errorMessage && 
{errorMessage}
}
    
  );
}

            

              
                Copy
              
            
          

Tushuntirish:

• createItem funksiyasi endi name'ning to'g'riligini tekshiradi (kamida 3 belgi).
• Agar tekshirish muvaffaqiyatsiz bo'lsa, xatolik yuzaga keladi.
• handleSubmit funksiyasi Server Action tomonidan yuzaga kelgan har qanday xatolikni ushlash va foydalanuvchiga xato xabarini ko'rsatish uchun yangilandi.

Tekshirish Kutubxonalaridan Foydalanish

Murakkabroq tekshirish holatlari uchun quyidagi kabi tekshirish kutubxonalaridan foydalanishni o'ylab ko'ring:

• Zod: TypeScript uchun mo'ljallangan sxema e'lon qilish va tekshirish kutubxonasi.
• Yup: Qiymatlarni tahlil qilish, tekshirish va o'zgartirish uchun JavaScript sxema quruvchisi.

Mana Zod yordamida misol:

            // app/utils/validation.ts
import { z } from 'zod';

export const CreateItemSchema = z.object({
  name: z.string().min(3, "Element nomi kamida 3 belgidan iborat bo'lishi kerak."),
});

            

              
                Copy
              
            
          

            // app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { CreateItemSchema } from '../utils/validation';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  const validatedFields = CreateItemSchema.safeParse({ name });

  if (!validatedFields.success) {
    return { errors: validatedFields.error.flatten().fieldErrors };
  }

  // Ma'lumotlar bazasi bilan o'zaro ta'sirni simulyatsiya qilish
  console.log('Element yaratilmoqda:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Kechikishni simulyatsiya qilish

  console.log('Element muvaffaqiyatli yaratildi!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Xatolik yuz berdi.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    

      

        Element nomi:
        
        
          {isSubmitting ? 'Yaratilmoqda...' : 'Element yaratish'}
        
      
      {errorMessage && 
{errorMessage}
}
    
  );
}

            

              
                Copy
              
            
          

Tushuntirish:

• CreateItemSchema Zod yordamida name maydoni uchun tekshirish qoidalarini belgilaydi.
• safeParse usuli kiritilgan ma'lumotlarni tekshirishga harakat qiladi. Agar tekshirish muvaffaqiyatsiz bo'lsa, u xatolar bilan obyekt qaytaradi.
• errors obyekti tekshirishdagi xatolar haqida batafsil ma'lumotni o'z ichiga oladi.

Xavfsizlik Masalalari

Server Actions serverda kodni bajarish orqali xavfsizlikni oshiradi, ammo ilovangizni umumiy tahdidlardan himoya qilish uchun xavfsizlikning eng yaxshi amaliyotlariga rioya qilish hali ham muhimdir.

Saytlararo So'rovlarni Soxtalashtirishdan (CSRF) Himoyalanish

CSRF hujumlari veb-saytning foydalanuvchi brauzeriga bo'lgan ishonchidan foydalanadi. CSRF hujumlarining oldini olish uchun CSRF himoya mexanizmlarini joriy qiling.

Next.js Server Actions'dan foydalanganda CSRF himoyasini avtomatik ravishda boshqaradi. Freymvork har bir shaklni yuborish uchun CSRF tokenini yaratadi va tekshiradi, bu esa so'rov sizning ilovangizdan kelib chiqqanligini ta'minlaydi.

Foydalanuvchi Autentifikatsiyasi va Avtorizatsiyasini Boshqarish

Faqat ruxsat berilgan foydalanuvchilar ma'lum harakatlarni bajarishi mumkinligiga ishonch hosil qiling. Maxfiy ma'lumotlar va funksionallikni himoya qilish uchun autentifikatsiya va avtorizatsiya mexanizmlarini joriy qiling.

Mana, Server Action'ni himoya qilish uchun NextAuth.js'dan foydalanishga misol:

            // app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { getServerSession } from 'next-auth';
import { authOptions } from '../../app/api/auth/[...nextauth]/route';

async function createItem(formData: FormData) {
  'use server'

  const session = await getServerSession(authOptions);

  if (!session) {
    throw new Error('Ruxsat berilmagan');
  }

  const name = formData.get('name') as string;

  // Ma'lumotlar bazasi bilan o'zaro ta'sirni simulyatsiya qilish
  console.log('Element yaratilmoqda:', name, 'foydalanuvchi tomonidan:', session.user?.email);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Kechikishni simulyatsiya qilish

  console.log('Element muvaffaqiyatli yaratildi!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Xatolik yuz berdi.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    

      

        Element nomi:
        
        
          {isSubmitting ? 'Yaratilmoqda...' : 'Element yaratish'}
        
      
      {errorMessage && 
{errorMessage}
}
    
  );
}

            

              
                Copy
              
            
          

Tushuntirish:

• getServerSession funksiyasi foydalanuvchining sessiya ma'lumotlarini oladi.
• Agar foydalanuvchi autentifikatsiyadan o'tmagan bo'lsa (sessiya yo'q), xatolik yuzaga keladi va Server Action bajarilishining oldi olinadi.

Kiritilgan Ma'lumotlarni Tozalash

Saytlararo Skripting (XSS) hujumlarining oldini olish uchun kiritilgan ma'lumotlarni tozalang. XSS hujumlari zararli kod veb-saytga kiritilganda sodir bo'ladi, bu esa foydalanuvchi ma'lumotlari yoki ilova funksionalligiga xavf solishi mumkin.

Server Actions'da foydalanuvchi tomonidan taqdim etilgan ma'lumotlarni qayta ishlashdan oldin ularni tozalash uchun DOMPurify yoki sanitize-html kabi kutubxonalardan foydalaning.

Ilg'or Texnikalar

Asoslarni o'rganib chiqqanimizdan so'ng, keling, Server Actions'dan samarali foydalanish uchun ba'zi ilg'or texnikalarni ko'rib chiqamiz.

Optimistik Yangilanishlar

Optimistik yangilanishlar, server tasdiqlashidan oldin ham, harakat muvaffaqiyatli bo'lishini taxmin qilib, UI'ni darhol yangilash orqali yaxshiroq foydalanuvchi tajribasini ta'minlaydi. Agar serverda harakat muvaffaqiyatsiz bo'lsa, UI avvalgi holatiga qaytariladi.

            // app/components/UpdateItemForm.tsx
'use client';

import { useState } from 'react';

async function updateItem(id: string, formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // Ma'lumotlar bazasi bilan o'zaro ta'sirni simulyatsiya qilish
  console.log('Element yangilanmoqda:', id, 'yangi nomi:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Kechikishni simulyatsiya qilish

  // Muvaffaqiyatsizlikni simulyatsiya qilish (namoyish uchun)
  const shouldFail = Math.random() < 0.5;
  if (shouldFail) {
    throw new Error("Elementni yangilab bo'lmadi.");
  }

  console.log('Element muvaffaqiyatli yangilandi!');
  return { name }; // Yangilangan nomni qaytarish
}

export default function UpdateItemForm({ id, initialName }: { id: string; initialName: string }) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  const [itemName, setItemName] = useState(initialName);

  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);

    // UI'ni optimistik tarzda yangilash
    const newName = formData.get('name') as string;
    setItemName(newName);

    try {
      const result = await updateItem(id, formData);
      // Muvaffaqiyatli bo'lsa, yangilanish allaqachon setItemName orqali UI'da aks etgan

    } catch (error: any) {
      setErrorMessage(error.message || 'Xatolik yuz berdi.');
      // Xatolik yuz berganda UI'ni orqaga qaytarish
      setItemName(initialName);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    

      
Joriy nom: {itemName}
      

        Yangi element nomi:
        
        
          {isSubmitting ? 'Yangilanmoqda...' : 'Elementni yangilash'}
        
      
      {errorMessage && 
{errorMessage}
}
    
  );
}

            

              
                Copy
              
            
          

Tushuntirish:

• Server Action'ni chaqirishdan oldin, UI darhol setItemName yordamida yangi element nomi bilan yangilanadi.
• Agar Server Action muvaffaqiyatsiz bo'lsa, UI asl element nomiga qaytariladi.

Ma'lumotlarni Qayta Tekshirish (Revalidatsiya)

Server Action ma'lumotlarni o'zgartirgandan so'ng, UI so'nggi o'zgarishlarni aks ettirishi uchun keshdagi ma'lumotlarni qayta tekshirishingiz kerak bo'lishi mumkin. Next.js ma'lumotlarni qayta tekshirishning bir necha usulini taqdim etadi:

• Yo'lni Qayta Tekshirish (Revalidate Path): Muayyan yo'l uchun keshni qayta tekshirish.
• Tegni Qayta Tekshirish (Revalidate Tag): Muayyan teg bilan bog'liq ma'lumotlar uchun keshni qayta tekshirish.

Mana yangi element yaratilgandan so'ng yo'lni qayta tekshirishga misol:

            // app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { revalidatePath } from 'next/cache';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // Ma'lumotlar bazasi bilan o'zaro ta'sirni simulyatsiya qilish
  console.log('Element yaratilmoqda:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Kechikishni simulyatsiya qilish

  console.log('Element muvaffaqiyatli yaratildi!');

  revalidatePath('/items'); // /items yo'lini qayta tekshirish (revalidate)
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Xatolik yuz berdi.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    

      

        Element nomi:
        
        
          {isSubmitting ? 'Yaratilmoqda...' : 'Element yaratish'}
        
      
      {errorMessage && 
{errorMessage}
}
    
  );
}

            

              
                Copy
              
            
          

Tushuntirish:

• revalidatePath('/items') funksiyasi /items yo'li uchun keshni bekor qiladi, bu esa shu yo'lga keyingi so'rovda eng so'nggi ma'lumotlarni olishini ta'minlaydi.

Server Actions Uchun Eng Yaxshi Amaliyotlar

Server Actions'ning afzalliklaridan maksimal darajada foydalanish uchun quyidagi eng yaxshi amaliyotlarni ko'rib chiqing:

• Server Actions'ni Kichik va Maqsadli Saqlang: Server Actions bitta, aniq belgilangan vazifani bajarishi kerak. O'qish qulayligi va testlanuvchanlikni saqlash uchun Server Actions ichida murakkab mantiqdan saqlaning.
• Tavsiflovchi Nomlardan Foydalaning: Server Actions'ingizga ularning maqsadini aniq ko'rsatadigan tavsiflovchi nomlar bering.
• Xatoliklarni To'g'ri Boshqaring: Foydalanuvchiga ma'lumot beruvchi fikr-mulohazalarni taqdim etish va ilovaning ishdan chiqishini oldini olish uchun mustahkam xatoliklarni boshqarish tizimini joriy qiling.
• Ma'lumotlarni Puxta Tekshiring: Ma'lumotlar yaxlitligini ta'minlash va xavfsizlik zaifliklarini oldini olish uchun keng qamrovli ma'lumotlarni tekshirishni amalga oshiring.
• Server Actions'ni Xavfsizligini Ta'minlang: Maxfiy ma'lumotlar va funksionallikni himoya qilish uchun autentifikatsiya va avtorizatsiya mexanizmlarini joriy qiling.
• Unumdorlikni Optimallashtiring: Server Actions'ingizning unumdorligini kuzatib boring va tezkor javob vaqtlarini ta'minlash uchun ularni kerak bo'lganda optimallashtiring.
• Keshlashdan Samarali Foydalaning: Unumdorlikni oshirish va ma'lumotlar bazasiga yuklamani kamaytirish uchun Next.js'ning keshlash mexanizmlaridan foydalaning.

Umumiy Xatolar va Ulardan Qochish Yo'llari

Server Actions ko'plab afzalliklarni taklif qilsa-da, e'tiborga olish kerak bo'lgan ba'zi umumiy xatolar mavjud:

• Haddan Tashqari Murakkab Server Actions: Bitta Server Action ichiga juda ko'p mantiq joylashtirishdan saqlaning. Murakkab vazifalarni kichikroq, boshqarilishi osonroq funksiyalarga bo'ling.
• Xatoliklarni Boshqarishni E'tiborsiz Qoldirish: Kutilmagan xatoliklarni ushlash va foydalanuvchiga yordam beruvchi fikr-mulohazalarni taqdim etish uchun har doim xatoliklarni boshqarishni qo'shing.
• Xavfsizlikning Eng Yaxshi Amaliyotlarini E'tiborsiz Qoldirish: Ilovangizni XSS va CSRF kabi umumiy tahdidlardan himoya qilish uchun xavfsizlikning eng yaxshi amaliyotlariga rioya qiling.
• Ma'lumotlarni Qayta Tekshirishni Unutish: UI'ni yangilab turish uchun Server Action ma'lumotlarni o'zgartirgandan so'ng keshdagi ma'lumotlarni qayta tekshirganingizga ishonch hosil qiling.

Xulosa

Next.js 14 Server Actions shakllarni yuborish va ma'lumotlar mutatsiyalarini to'g'ridan-to'g'ri serverda boshqarishning kuchli va samarali usulini taqdim etadi. Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz mustahkam, xavfsiz va yuqori unumdorlikka ega veb-ilovalar yaratishingiz mumkin. Kodingizni soddalashtirish, xavfsizlikni oshirish va umumiy foydalanuvchi tajribasini yaxshilash uchun Server Actions'ni qabul qiling. Ushbu tamoyillarni integratsiya qilayotganda, ishlab chiqish tanlovlaringizning global ta'sirini hisobga oling. Shakllaringiz va ma'lumotlarni qayta ishlash jarayonlaringiz turli xalqaro auditoriyalar uchun qulay, xavfsiz va foydalanuvchiga do'stona ekanligiga ishonch hosil qiling. Inkluzivlikka bo'lgan bu sodiqlik nafaqat ilovangizning foydalanish qulayligini yaxshilaydi, balki uning global miqyosdagi qamrovi va samaradorligini ham kengaytiradi.