Next.js, modern veb tətbiqlərin inkişafında önəmli rol oynayır. Platformanın güclü xüsusiyyətləri – server-side rendering (SSR), static site generation (SSG) və incremental static regeneration (ISR) – developerlərə sürətli və optimallaşdırılmış tətbiqlər yaratmağa imkan verir. Bu məqalədə Next.js-in optimizasiyası üçün əsas yanaşmaları, ən yaxşı təcrübələri və gələcəyə yönəlik tövsiyələri müzakirə edəcəyik.

SSR, SSG və ISR İstifadəsi

Hər bir layihənin tələbləri fərqli olduğundan, doğru render strategiyasını seçmək vacibdir. Server-Side Rendering (SSR) dinamik məzmun üçün idealdır, Static Site Generation (SSG) isə dəyişməyən səhifələr üçün sürətli yüklənməni təmin edir. Incremental Static Regeneration (ISR) isə statik səhifələrin mütəmadi yenilənməsini təmin edərək həm performansı, həm də aktuallığı qoruyur. Hər yanaşmanın öz üstünlükləri var və layihənin tələblərinə uyğun olaraq seçilməlidir.

Daxili Optimallaşdırma Xüsusiyyətindən istifadə

Nextjs tətbiqinizin sürətini yaxşılaşdırmaq üçün müxtəlif daxili optimallaşdırmalarla gəlir. Mövcud optimallaşdırmanın bir çox növləri var.

Image

Next.js-in Image Component-i şəkil optimizasiyası üçün çox güclü vasitədir. Avtomatik format çevrilməsi, ölçü uyğunlaşdırması və lazy loading kimi xüsusiyyətlər sayəsində şəkillərin optimallaşdırılması saytlara əlavə dəyər qatır. Bu texnika, xüsusilə mobil istifadəçilər üçün yüklənmə sürətini və ümumi istifadəçi təcrübəsini yaxşılaşdırır.

import Image from "next/image";

const Index = () => {
  return (
    <>
      <p>
        External domains must be configured in <Code>next.config.js</Code> using
        the <Code>domains</Code> property.
      </p>
      <Image
        alt="Next.js logo"
        src="<https://assets.vercel.com/image/upload/v1538361091/repositories/next-js/next-js-bg.png>"
        width={1200}
        height={400}
      />
    </>
  );
};

<aside> ⚠️

Amma burada bir nüans var. Şəkilləri Cache folderində saxladığı üçün böyük həcimli layihələrdə serverin əlavə yüklənməsinə səbəb ola bilər. Böyük layihələrdə İmage component əvəzinə img tag və istifadə etdiyiniz image servisinin cache ni istifadə edin.

</aside>

Font

• Brauzerin fontları yükləməsi müəyyən vaxt tələb edir. Optimizasiya edilməmiş fontlar, səhifənin render edilməsini gecikdirə bilər.
• Google Core Web Vitals metrikalarına əsasən, font optimizasiyası LCP (Largest Contentful Paint) və CLS (Cumulative Layout Shift) kimi göstəriciləri yaxşılaşdırmağa kömək edir.
• Brauzer fallback fontu göstərərkən, gözə çarpan dəyişikliklər (FOUT - Flash of Unstyled Text və ya FOIT - Flash of Invisible Text) baş verə bilər.

Google Fonts-dan İstifadə və Optimizasiya

Next.js-in @next/font/google modulu ilə Google Fonts-u daxili şəkildə optimallaşdıraraq yükləmək mümkündür. Bu metod fontları automatik host edir, lazım xüsusiyyətləri seçməyə imkan verir və ekstra şəbəkə sorğularını azaldır.

import { Inter } from 'next/font/google';

// Fontu konfiqurasiya edirik
const inter = Inter({ subsets: ['latin'], weight: ['400', '700'], display: 'swap' });

export default function Home() {
  return (
    <main className={inter.className}>
      <h1>Next.js Font Optimizasiyası</h1>
      <p>Bu səhifə optimallaşdırılmış font yükləməsi ilə render edilir.</p>
    </main>
  );
}

Custom Fontların Optimizasiyası

Google Fonts-dan istifadə etmirsinizsə və özəl fontları (custom fonts) yükləmək istəyirsinizsə, Next.js-də @next/font/local modulu ilə fontları effektiv şəkildə idarə edə bilərsiniz.