Sonraki.js 13

Popüler React çerçevesi Next.js'nin arkasındaki şirket olan Vercel, çerçevenin en son sürümünü 25 Ekim 2022'de yayınladı. Bu yeni sürüm, Next.js 13, düzen, veri alma ve yönlendirme gibi özelliklerde güncellemeler ve iyileştirmeler içerir , yanı sıra daha hızlı bir paketleyici. Bu değişikliklerin amacı, geliştiricilerin React kullanarak hızlı, ölçeklenebilir ve güvenilir web uygulamaları oluşturmasını kolaylaştırmaktır.

Next.js 13'teki yeni bir özellik, geliştiricilerin sayfaları uygulama dizini içindeki klasörlere yerleştirerek iç içe yollar oluşturmasına olanak tanıyan yol segmentlerinin tanıtılmasıdır. Geliştiriciler, bu klasörler içinde yollar oluştururken index.jsx yerine page.jsx'i kullanabilir.

Next.js'nin önceki sürümlerinde, kullanıcı arayüzünü birden çok sayfa arasında paylaşmak için geliştiricilerin bir düzen klasörü oluşturması gerekiyordu. Ancak, Next.js 13'ün piyasaya sürülmesiyle, yeni bir proje oluşturulurken düzen artık varsayılan olarak dahil edildiğinden, bu artık gerekli değildir. Next.js 13'teki düzen etkileşimlidir ve yeniden oluşturulması gerekmez, bu da geliştiricilerin üzerinde çalışmasını kolaylaştırır.

Varsayılan düzenin dahil edilmesine ek olarak, Next.js 13 ayrıca veri almak için API'ye yönelik basitleştirmeler sunar. Eski API'ler getServerSideProps , getStaticProps ve getInitialProps artık desteklenmemektedir ve kullanımı daha kolay olacak şekilde tasarlanmış yeni bir API ile değiştirilmiştir.

GetServerSideProps'a benzer

GetServerSideProps. kullanarak gönderme isteği 'mağazasız' olarak önbelleğe alınmalıdır.

fetch(URL, { cache: 'no-store' });

getServerSideProps kullanarak gönderme isteği 'force-cache' olarak önbelleğe alınmalıdır.

fetch(URL, { cache: 'force-cache' });

Ömür boyu saniyelerle önbelleğe alındığında

fetch(URL, { next: { revalidate: 30 } });

Turbopack, Webpack, Vite'a kıyasla daha hızlı bir paketleyicidir. Ayrıca Turbopack, kaynak değişikliklerinin işlenmesini optimize edilmiş bir şekilde iyileştirmek için akıllı önbelleğe alma teknikleri kullanır. Turbopack, halihazırda oluşturulmuş değişikliklerin bir modelini tutar ve yalnızca devam eden değişikliklere dayalı olanları oluşturur. " sonraki dev — — turbo" komutunu çalıştırırsanız Turbopack'i deneyebilirsiniz .

Turbopack sonuçları:

Webpack'ten 700 kat daha hızlı güncellemeler

Vite'dan 10 kat daha hızlı güncellemeler

Webpack'ten 4 kat daha hızlı soğuk çalıştırma

"müşteri kullan"

Bileşenler otomatik olarak sunucu bileşeni olarak işlenebilir ve 'useState' ve 'useEffect' client kancalarını kullanmak istiyorsak, dosyanın başına 'use client' yazmak gerekir.

'use client';

import { useState } from 'react';

export default function Navbar() {
  const [title, setTitle] = useState('React');

  return (
    <div>
      <p>{title}</p>
    </div>
  );
}

Next.js'nin önceki sürümlerinde, bir bağlantıyı düzgün bir şekilde oluşturmak için <a> öğesinin <Link> içinde iç içe olması gerekiyordu. Ancak, Next.js 13'ün piyasaya sürülmesiyle,<Link> artık varsayılan olarak her zaman <a> öğesini oluşturuyor.

import Link from 'next/link'

// Next.js 12: 
<Link href="/checkout">
  <a>About</a>
</Link>

// Next.js 13
<Link href="/checkout">
  About
</Link>

Next.js'nin önceki sürümlerinde, bir hatayı önlemek için görüntü için 'alt' özniteliğinin belirtilmesi gerekiyordu. Ancak, Next.js 13'ün kullanıma sunulmasıyla birlikte artık 'alt' özelliğine ihtiyacınız yok.

import Image from 'next/image';
import logo from './logo.png';

function Navbar() {
  return <Image alt="logo" src={logo} />;
}

Next.js 13 yeni yazı tipi sistemine göre, özel yazı tiplerinizi optimize edebilir ve ayrıca tarayıcıdan herhangi bir talepte bulunmadan Google yazı tiplerini kullanabilirsiniz. Yapmanız gereken tek şey @next/font paketini kurmak. Bunu şu şekilde kullanabilirsiniz:

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

const inter = Inter();

Teşekkürler, Bir sonraki yazıda görüşmek üzere !!

bana burdan ulaşabilirsin

Linkedin:https://www.linkedin.com/in/cerensolpan/

GitHub'da:https://github.com/cerensolpan

Twitter: https://twitter.com/cerensolpanture