Next.js 14 ile gelen yenilikler

Nextjs ekibi Next Conf’da 14 versiyonu ile bazı bilgiler verdi. Bu yazıda bunlardan bahsettim.
Ayrıca ingilizce orjinal yazıya buradan ulaşabilirsiniz.

Kısaca Next.js 14

  • TurboPack : app & page router için 5000 test geçildi.
    Yerel server’ı başlatma hızı %53 arttı.
    Kod değişikliğinin Hızlı Yenileme özelliği %94 arttı.
  • Server Actions : Sunucu fonksiyonları stabil hale getirildi.
    Caching gibi özellikler ile uyumlu hale getirildi.
    Basit fonksiyonlar ve form işlemleri ile native (doğrudan) çalışıyor.
  • Kısmı Rendering : İlk websayfasını statik olarak gönderip dinamik içerikleri sonradan oluşturma işlemi
  • Next.js Learn eğitim sayfası : Next.js için eğitim sayfası oluşturuldu.

Next.js 14 yenilikleri detayları

Next.js ekibinin blog yazısından yenilikleri detaylı açıkladım.

Nextjs compiler : turbopack

Next.js ekibi versiyon 13’den beri yerel geliştirme ortamını hızlandırdıklarını anlatmış.

npm run dev komutunu tekrardan yazdıklarını söylüyorlar.

Rust tabanlı compiler olan Turbopack’in 5000’den fazla testi geçtiğini ve yakında stabil hale geleceğini söylüyorlar.
Turbopack’in kaç tane test geçtiğini Are We Turbo Yet? adresinden görebilirsiniz.

Yerel geliştirme ortamında %53 hız artışı, kod yenileme hızında ise %94 artış olduğunu belirtmişler.

Turbopack testlerin %100’ünü geçtiğinde geçiş olacakmış.

Eğer şimdiden turbopack kullanmak istiyorsanız next dev –turbo komutunu kullanabilirsiniz fakat dikkatli olun stabil değil hala

Formlar ve API routes

Next.js 9 ile birlikte backend kodunuzu frontend kodunuza kolayca bağlamaya yarayan API routes gelmişti. Next.js 14 ile birlikte bu işlemi kolaylaştırmayı ve yavaş internet durumlarında kullanıcıya iyi bir deneyim sağlamayı amaçlıyorlarmış.

pages/api/submit.ts

import type { NextApiRequest, NextApiResponse } from 'next';
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const data = req.body;
  const id = await createItem(data);
  res.status(200).json({ id });
}

pages/index.tsx

import { FormEvent } from 'react';
 
export default function Page() {
  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
 
    const formData = new FormData(event.currentTarget);
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: formData,
    });
 
    // Handle response if necessary
    const data = await response.json();
    // ...
  }
 
  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Server Actions

Next’in server actions olarak bahsettiği şey özel olarak API oluşturmadan, çağırıldığında çalışan sunucu tabanlı fonksiyonlar.

Aşağıdaki kod parçasında görebilirsiniz bir örneğini. “use server” etiketi ile sunucuda çalışacak bir kod parçası tanımlıyor.

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }
 
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Caching, Revalidating ve Yönlendirme

Server actions, app router ile uyumlu şekilde çalışır ve cache’leme ve yönlendirme gibi optimizasyonları kullanabilirsiniz diyor next.

Next app router data fetching için tıklayın.

Ve diğer değişiklikler

  • Partial Prerendering : Web sitesinin bazı kısımlarını optimizasyon için önceden renderlama
  • Metadata ve meta tag geliştirmeleri. viewport veya colorSchema gibi
  • Ücretsiz Next.js kursu : Learn Next.js adında ücretsiz kurs çıkmış (ingilizce)
  • En düşük node.js versiyonu 18.17 olmuş.

Video kaynaklar

Aşağıdaki ingilizce video kaynaklara da göz atabilirsiniz. sponsorsuz

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top