Version 11

Sürüm 11'e yükseltmek için aşağıdaki komutu çalıştırın:

npm i next@11 react@17 react-dom@17

yarn add next@11 react@17 react-dom@17

pnpm up next@11 react@17 react-dom@17

bun add next@11 react@17 react-dom@17

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

Webpack 5

Webpack 5 artık tüm Next.js uygulamaları için varsayılandır. Özel bir webpack yapılandırmanız yoksa, uygulamanız zaten webpack 5 kullanıyor demektir. Özel bir webpack yapılandırmanız varsa, yükseltme kılavuzu için Next.js webpack 5 belgelerine başvurabilirsiniz.

Cleaning the distDir is now a default

Derleme çıktı dizini (varsayılan olarak .next) artık Next.js önbellekleri dışında varsayılan olarak temizlenmektedir. Daha fazla bilgi için temizleme distDir RFC adresine başvurabilirsiniz.

Uygulamanız daha önce bu davranışa güveniyorsa, next.config.js adresine cleanDistDir: false bayrağını ekleyerek yeni varsayılan davranışı devre dışı bırakabilirsiniz.

PORT is now supported for next dev and next start

Next.js 11, uygulamanın üzerinde çalıştığı bağlantı noktasını ayarlamak için PORT ortam değişkenini destekler. -p /--port adreslerinin kullanılması hala tavsiye edilmektedir ancak -p adresini herhangi bir şekilde kullanmanız yasaklanmışsa artık alternatif olarak PORT adresini kullanabilirsiniz:

Örnek:

PORT=4000 next start

next.config.js customization to import images

Next.js 11, next/image ile statik görüntü içe aktarımlarını destekler. Bu yeni özellik, görüntü içe aktarımlarını işleyebilmeye dayanır. Daha önce next-images veya next-optimized-images paketlerini eklediyseniz, next/image kullanarak yeni yerleşik desteğe geçebilir veya özelliği devre dışı bırakabilirsiniz:

module.exports = {
  images: {
    disableStaticImages: true,
  },
}

Remove super.componentDidCatch() from pages/_app.js

next/app bileşeninin componentDidCatch adresi Next.js 9'da artık gerekli olmadığı için kullanımdan kaldırılmıştır ve o zamandan beri kullanılmamaktadır. Next.js 11'de ise kaldırılmıştır.

pages/_app.js adresinizin özel bir componentDidCatch yöntemi varsa, artık gerekli olmadığından super.componentDidCatch adresini kaldırabilirsiniz.

Remove Container from pages/_app.js

Bu dışa aktarım, artık gerekli olmadığı için Next.js 9'da kullanımdan kaldırılmıştır ve o zamandan beri geliştirme sırasında bir uyarı ile kullanılmamaktadır. Next.js 11'de kaldırılmıştır.

pages/_app.js adresiniz Container adresini next/app adresinden içe aktarıyorsa, Container adresini kaldırıldığı gibi kaldırabilirsiniz. Belgelerde daha fazla bilgi edinin.

Remove props.url usage from page components

Bu özellik Next.js 4'te kullanımdan kaldırılmıştı ve o zamandan beri geliştirme sırasında bir uyarı gösteriyordu. getStaticProps / getServerSideProps yöntemlerinin kullanılmaya başlanmasıyla birlikte bu yöntemler props.url kullanımına zaten izin vermiyordu. Next.js 11'de ise tamamen kaldırıldı.

Belgelerden daha fazla bilgi edinebilirsiniz.

Remove unsized property on next/image

next/image üzerindeki unsized özelliği Next.js 10.0.1'de kullanımdan kaldırılmıştır. Bunun yerine layout="fill" kullanabilirsiniz. Next.js 11'de unsized kaldırıldı.

Remove modules property on next/dynamic

next/dynamic için modules ve render seçenekleri Next.js 9.5'te kullanımdan kaldırılmıştır. Bu, next/dynamic API'sini React.lazy'a daha yakın hale getirmek için yapıldı. Next.js 11'de modules ve render seçenekleri kaldırıldı.

Bu seçenekten Next.js 8'den beri belgelerde bahsedilmemektedir, bu nedenle uygulamanızın bunu kullanıyor olma olasılığı daha düşüktür.

Uygulamanız modules ve render kullanıyorsa belgelere başvurabilirsiniz.

Remove Head.rewind

Head.rewind Next.js 9.5'ten beri kullanılmamaktadır, Next.js 11'de kaldırılmıştır. Head.rewind kullanımınızı güvenle kaldırabilirsiniz.

Moment.js locales excluded by default

Moment.js varsayılan olarak birçok yerel ayar için çeviriler içerir. Next.js artık Moment.js kullanan uygulamaların paket boyutunu optimize etmek için bu yerelleri varsayılan olarak otomatik olarak hariç tutuyor.

Belirli bir yerel ayarı yüklemek için bu kod parçacığını kullanın:

import moment from 'moment'
import 'moment/locale/ja'
 
moment.locale('ja')

Yeni davranışı istemiyorsanız excludeDefaultMomentLocales: false adresini next.config.js adresine ekleyerek bu yeni varsayılandan vazgeçebilirsiniz, Moment.js'nin boyutunu önemli ölçüde azalttığı için bu yeni optimizasyonu devre dışı bırakmamanızın şiddetle tavsiye edildiğini unutmayın.

Update usage of router.events

Render sırasında router.events adresine erişiyorsanız, Next.js 11'de router.events artık ön render sırasında sağlanmamaktadır. useEffect adresinden router.events adresine eriştiğinizden emin olun:

useEffect(() => {
  const handleRouteChange = (url, { shallow }) => {
    console.log(
      `App is changing to ${url} ${
        shallow ? 'with' : 'without'
      } shallow routing`
    )
  }
 
  router.events.on('routeChangeStart', handleRouteChange)
 
  // If the component is unmounted, unsubscribe
  // from the event with the `off` method:
  return () => {
    router.events.off('routeChangeStart', handleRouteChange)
  }
}, [router])

Uygulamanız herkese açık olmayan dahili bir özellik olan router.router.events 'u kullanıyorsa lütfen router.events 'u da kullandığınızdan emin olun.

React 16 to 17

React 17, uzun süredir kullanılan Next.js özelliğini daha geniş React ekosistemine getiren yeni bir JSX Transform 'u tanıttı: JSX kullanırken import React from 'react' adresine girmek zorunda kalmamak. React 17 kullanırken Next.js otomatik olarak yeni dönüşümü kullanacaktır. Bu dönüşüm, önceki Next.js uygulamasının istenmeyen bir yan etkisi olan React değişkenini global yapmaz. React adresini içe aktarmadan yanlışlıkla kullandığınız durumları otomatik olarak düzeltmek için bir codemod mevcuttur.

Çoğu uygulama zaten React'in en son sürümünü kullanıyor, Next.js 11 ile minimum React sürümü 17.0.2'ye güncellendi.

Yükseltmek için aşağıdaki komutu çalıştırabilirsiniz:

npm install react@latest react-dom@latest

Veya yarn adresini kullanarak:

yarn add react@latest react-dom@latest