Version 13

Upgrading from 12 to 13

Next.js sürüm 13'e güncellemek için tercih ettiğiniz paket yöneticisini kullanarak aşağıdaki komutu çalıştırın:

npm i next@13 react@latest react-dom@latest eslint-config-next@13

yarn add next@13 react@latest react-dom@latest eslint-config-next@13

pnpm i next@13 react@latest react-dom@latest eslint-config-next@13

bun add next@13 react@latest react-dom@latest eslint-config-next@13

Bilmekte fayda var: TypeScript kullanıyorsanız, @types/react ve @types/react-dom adreslerini de en son sürümlerine yükselttiğinizden emin olun.

v13 Summary

• Desteklenen Tarayıcılar, Internet Explorer'ı bırakacak ve modern tarayıcıları hedefleyecek şekilde değiştirildi.
• Minimum Node.js sürümü 12.22.0'dan 16.14.0'a yükseltildi, çünkü 12.x ve 14.x kullanım ömrünün sonuna ulaştı.
• Minimum React sürümü 17.0.2'den 18.2.0'a yükseltildi.
• swcMinify yapılandırma özelliği false yerine true olarak değiştirildi. Daha fazla bilgi için Next.js Derleyici bölümüne bakın.
• next/image içe aktarımı next/legacy/image olarak yeniden adlandırıldı. next/future/image içe aktarımı next/image olarak yeniden adlandırıldı. İçe aktarımlarınızı güvenli ve otomatik bir şekilde yeniden adlandırmak için bir codemod mevcuttur.
• next/link alt öğesi artık <a> olamaz. Eski davranışı kullanmak için legacyBehavior prop'unu ekleyin veya yükseltmek için <a> prop'unu kaldırın. Kodunuzu otomatik olarak yükseltmek için bir codemod mevcuttur.
• target yapılandırma özelliği kaldırılmış ve yerini Çıktı Dosyası İzleme almıştır.

Migrating shared features

Next.js 13, yeni özellikler ve kurallar içeren yeni bir app diz ini sunar. Ancak Next.js 13'e yükseltmek için yeni app dizininin kullanılması gerekmez.

Güncellenen Resim bileşeni, Bağlantı bileşeni, Komut Dosyası bileşeni ve Yazı Tipi optimizasyonu gibi her iki dizinde de çalışan yeni özelliklerle pages adresini kullanmaya devam edebilirsiniz.

<Image/> Component

Next.js 12, geçici bir içe aktarma ile Görüntü Bileşenine birçok iyileştirme getirdi: next/future/image. Bu iyileştirmeler arasında daha az istemci tarafı JavaScript, görüntüleri genişletmek ve şekillendirmek için daha kolay yollar, daha iyi erişilebilirlik ve yerel tarayıcı tembel yüklemesi yer alıyordu.

Next.js 13'ten itibaren, bu yeni davranış artık next/image için varsayılandır.

Yeni Görüntü Bileşenine geçiş yapmanıza yardımcı olacak iki kodmod vardır:

• next-image-to-legacy-image: Bu codemod, Next.js 12 ile aynı davranışı sürdürmek için next/image içe aktarmalarını güvenli ve otomatik olarak next/legacy/image olarak yeniden adlandıracaktır. Next.js 13'e otomatik olarak hızlı bir şekilde güncellemek için bu codemod'u çalıştırmanızı öneririz.
• next-image-experimental: Önceki codemod'u çalıştırdıktan sonra, isteğe bağlı olarak next/legacy/image adresini yeni next/image adresine yükseltmek için bu deneysel codemod'u çalıştırabilirsiniz; bu, kullanılmayan sahne öğelerini kaldıracak ve satır içi stiller ekleyecektir. Lütfen bu codemod'un deneysel olduğunu ve yalnızca statik kullanımı ( <Image src={img} layout="responsive" /> gibi) kapsadığını, dinamik kullanımı ( <Image {...props} /> gibi) kapsamadığını unutmayın.

Alternatif olarak, geçiş kılavuzunu izleyerek manuel olarak güncelleme yapabilir ve ayrıca eski karşılaştırmaya bakabilirsiniz.

<Link> Component

<Link> Bileşeni artık bir <a> etiketinin alt öğe olarak manuel olarak eklenmesini gerektirmiyor. Bu davranış 12.2 sürümünde deneysel bir seçenek olarak eklenmişti ve artık varsayılandır. Next.js 13'te, <Link> her zaman <a> adresini oluşturur ve destekleri altta yatan etikete yönlendirmenize olanak tanır.

Örneğin:

import Link from 'next/link'
 
// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
  <a>About</a>
</Link>
 
// Next.js 13: `<Link>` always renders `<a>` under the hood
<Link href="/about">
  About
</Link>

Bağlantılarınızı Next.js 13'e yükseltmek için new-link codemod'u kullanabilirsiniz.

<Script> Component

Davranışları next/script hem pages hem de app adreslerini destekleyecek şekilde güncellenmiştir. app adresini aşamalı olarak benimsiyorsanız, yükseltme kılavuzunu okuyun.

Font Optimization

Daha önce Next.js, yazı tipi CSS'sini inlining yaparak yazı tiplerini optimize etmenize yardımcı oluyordu. Sürüm 13 yeni next/font modülü, size yazı tipi yükleme deneyiminizi kişiselleştirme olanağı verirken, aynı zamanda mükemmel performans ve gizlilik sağlar.

next/font adresini nasıl kullanacağınızı öğrenmek için Yazı Tiplerini Optimize Etme bölümüne bakın.