Next.js 14 Yayınlandı - Yenilikler Neler?

Next.js 14 Yayınlandı: Yeni Özellikler ve İyileştirmeler Neler?

Kısmi Ön İşleme (Önizleme)

Next.js 14'ün en önemli yeni özelliklerinden biri, Kısmi Ön İşleme (Önizleme) desteğidir. Bu özellik, dinamik içerik için hızlı ilk statik yanıtlar sağlar.

Kısmi Ön İşleme, Suspense sınırlarınız tarafından tanımlanır. Örneğin, aşağıdaki e-ticaret sayfasını düşünün:

export default function Page() {
  return (
    <main>
      <header>
        <h1>My Store</h1>
        <Suspense fallback={<CartSkeleton />}>
          <ShoppingCart />
        </Suspense>
      </header>
      <Banner />
      <Suspense fallback={<ProductListSkeleton />}>
        <Recommendations />
      </Suspense>
      <NewProducts />
    </main>
  );
}

Kısmi Ön İşleme etkinleştirildiğinde, bu sayfa <Suspense /> sınırlarınıza göre statik bir kabuk oluşturur. React Suspense'in geri dönüşü önceden oluşturulur.

Ardından, kabuktaki Suspense geri dönüşleri dinamik bileşenlerle değiştirilir, örneğin sepeti belirlemek için çerezleri okumak veya kullanıcıya göre bir afiş göstermek gibi.

Bir istek yapıldığında, statik HTML kabuğu hemen sunulur:

<main>
  <header>
    <h1>My Store</h1>
    <div class="cart-skeleton">
      </div>
  </header>
  <div class="banner" />
  <div class="product-list-skeleton">
    </div>
  <section class="new-products" />
</main>

<ShoppingCart /> kullanıcının oturumunu görmek için çerezleri okuduğundan, bu bileşen daha sonra statik kabukla aynı HTTP isteğinin bir parçası olarak akışa alınır. Ekstra ağ gidiş-dönüş yolculuğuna gerek yoktur.

Kısmi Ön İşleme, özellikle yavaş ağ bağlantıları veya düşük güçlü cihazlar için faydalıdır.

Metadata Geliştirmeleri

Next.js 14, meta veri desteğinde de iyileştirmeler yaptı. Artık, engelleyici olmayan meta veriler, kısmen ön işlenmiş bir sayfanın statik kabuğunu sunmasını engellemeyecektir.

Bu, aşağıdaki meta veri seçeneklerinin kaldırılmasına yol açtı:

• viewport: Görünümün ilk yakınlaştırma ve diğer özelliklerini ayarlar
• colorScheme: Görüntü için destek modlarını (açık/koyu) ayarlar
• themeColor: Görünümün etrafındaki kromun işlenmesi gereken rengi ayarlar

Bu değişiklikler, web sitelerinizin daha iyi performans göstermesine ve kullanıcı deneyimini iyileştirmesine yardımcı olabilir.

Next.js Learn Kursu

Next.js 14'ün yayınlanmasıyla birlikte, Next.js Learn'de yeni bir kurs da yayınlandı. Bu kurs, Next.js'nin temellerini öğrenmek isteyen geliştiriciler için mükemmel bir kaynaktır.

Detaylar için : https://nextjs.org/learn adresini inceleyebilirsiniz.

Kurs, aşağıdaki konuları kapsar:

• Next.js Uygulama Yönlendiricisi
• Stilize etme ve Tailwind CSS
• Yazı Tiplerini ve Görüntüleri Optimize Etme
• Yerleşimler ve Sayfalar Oluşturma
• Sayfalar Arası Gezinme
• Postgres Veritabanınızı Kurma
• Sunucu Bileşenleriyle Veri Getirme
• Statik ve Dinamik İşleme
• Akış
• Kısmi Ön İşleme (İsteğe Bağlı)
• Arama ve Sayfalama Ekleme
• Veriyi Değiştirme
• Hataları Yönetme
• Erişilebilirliği Geliştirme
• Kimlik Doğrulama Ekleme
• Meta Veri Ekleme

Kısmi Ön İşleme

Aşağıdaki örnek kod, Kısmi Ön İşleme'yi nasıl kullanacağını gösterir.

import { useState, useEffect } from 'react';
import { Suspense, useSuspense } from 'next/experimental';

const Page = () => {
  const [cart, setCart] = useState([]);

  useEffect(() => {
    // Sepeti API'den al
    fetch('/api/cart')
      .then((response) => response.json())
      .then((data) => setCart(data));
  }, []);

  return (
    <main>
      <header>
        <h1>My Store</h1>
        <Suspense fallback={<CartSkeleton />}>
          <ShoppingCart cart={cart} />
        </Suspense>
      </header>
      <Banner />
      <Suspense fallback={<ProductListSkeleton />}>
        <Recommendations />
      </Suspense>
      <NewProducts />
    </main>
  );
};

export default Page;

Bu kod, bir e-ticaret sayfasını temsil eder. Sayfa, bir alışveriş sepeti, bir afiş ve yeni ürünler bölümünü içerir.

ShoppingCart bileşeni, sayfanın statik kabuğunun bir parçası değildir. Bunun yerine, bir Suspense sınırının içinde bulunur. Bu, bileşenin dinamik olarak yükleneceğini ve statik kabuğun hemen sunulacağını gösterir.

useSuspense hook'u, Suspense sınırının içinde bulunan bileşeni alır ve onu statik kabuğa yerleştirir.

cart state değişkeni, kullanıcının alışveriş sepetini temsil eder. Bu değişken, useEffect hook'u kullanılarak API'den alınır.

CartSkeleton bileşeni, alışveriş sepetinin statik bir taslağını temsil eder. Bu bileşen, ShoppingCart bileşeni yüklenene kadar sunulur.

Örnek çıktı

Statik kabuk:

<main>
  <header>
    <h1>My Store</h1>
    <div class="cart-skeleton">
      </div>
  </header>
  <div class="banner" />
  <div class="product-list-skeleton">
    </div>
  <section class="new-products" />
</main>

Dinamik içerik:

<main>
  <header>
    <h1>My Store</h1>
    <div class="cart-skeleton">
      <ul>
        <li>Product 1</li>
        <li>Product 2</li>
      </ul>
    </div>
  </header>
  <div class="banner" />
  <div class="product-list-skeleton">
    <ul>
      <li>Product 1</li>
      <li>Product 2</li>
    </ul>
  </div>
  <section class="new-products" />
</main>

Bu örnek, Kısmi Ön İşleme'nin nasıl kullanılacağını göstermektedir. Kısmi Ön İşleme, dinamik içerik için hızlı ilk statik yanıtlar sağlayarak web sitelerinizin performansını ve kullanılabilirliğini iyileştirmeye yardımcı olabilir.