Version 12

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

Terminal

npm i next@12 react@17 react-dom@17 eslint-config-next@12

Terminal

yarn add next@12 react@17 react-dom@17 eslint-config-next@12

Terminal

pnpm up next@12 react@17 react-dom@17 eslint-config-next@12

Terminal

bun add next@12 react@17 react-dom@17 eslint-config-next@12

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

Upgrading to 12.2

Middleware - 12.2 adresinden önce Middleware kullanıyorsanız, daha fazla bilgi için lütfen yükseltme kılavuzuna bakın.

Upgrading to 12.0

Minimum Node.js Sürümü - Minimum Node.js sürümü, yerel ES Modülleri desteğine sahip ilk Node.js sürümü olan 12.0.0 'den 12.22.0 'ye yükseltildi.

Minimum React Sürümü - Gerekli minimum React sürümü 17.0.2'dur. Yükseltmek için terminalde aşağıdaki komutu çalıştırabilirsiniz:

Terminal

npm install react@latest react-dom@latest
 
yarn add react@latest react-dom@latest
 
pnpm update react@latest react-dom@latest
 
bun add react@latest react-dom@latest

Next.js artık JavaScript/TypeScript derlemek için Rust tabanlı SWC derleyicisini kullanıyor. Bu yeni derleyici, tek tek dosyaları derlerken Babel'den 17 kata kadar daha hızlıdır ve 5 kata kadar daha hızlı Hızlı Yenileme sağlar.

Next.js, özel Babel yapılandırmasına sahip uygulamalarla geriye dönük tam uyumluluk sağlar. Next.js'nin styled-jsx ve getStaticProps / getStaticPaths / getServerSideProps ağaç sallama gibi varsayılan olarak işlediği tüm dönüşümler Rust'a taşınmıştır.

Bir uygulama özel bir Babel yapılandırmasına sahip olduğunda, Next.js otomatik olarak JavaScript/Typescript derlemek için SWC kullanmayı tercih etmeyecek ve Babel'i Next.js 11'de kullanıldığı şekilde kullanmaya geri dönecektir.

Şu anda özel Babel dönüşümleri gerektiren harici kütüphanelerle entegrasyonların çoğu yakın gelecekte Rust tabanlı SWC dönüşümlerine taşınacaktır. Bunlar aşağıdakileri içerir ancak bunlarla sınırlı değildir:

Şekillendirilmiş Bileşenler
Duygu
Röle

SWC'yi benimsemenize yardımcı olacak dönüşümlere öncelik vermek için, lütfen .babelrc adresindeki bu geri bildirim başlığına adresini girin.

SWC replacing Terser for minification

next.config.js adresindeki bir bayrağı kullanarak JavaScript'i 7 kata kadar daha hızlı küçültmek için Terser'i SWC ile değiştirmeyi seçebilirsiniz:

next.config.js

module.exports = {
  swcMinify: true,
}

SWC kullanarak küçültme, Next.js 12.1'de varsayılan olmadan önce daha fazla gerçek dünya Next.js uygulamasına karşı test edilebilmesini sağlamak için tercih edilen bir bayraktır. Minifikasyon hakkında geri bildiriminiz varsa, lütfen bu geri bildirim başlığına bırakın .

Improvements to styled-jsx CSS parsing

Rust tabanlı derleyicinin üzerine, styled-jsx Babel dönüşümü için kullanılanı temel alan yeni bir CSS ayrıştırıcısı uyguladık. Bu yeni ayrıştırıcı, CSS'nin işlenmesini iyileştirdi ve artık daha önce gözden kaçan ve beklenmedik davranışlara neden olan geçersiz CSS kullanıldığında hata veriyor.

Bu değişiklik nedeniyle geçersiz CSS geliştirme sırasında hata verecektir ve next build. Bu değişiklik yalnızca styled-jsx kullanımını etkiler.

`next/image` changed wrapping element

next/image artık <img> öğesini <div> yerine <span> içinde oluşturuyor.

Uygulamanızda .container span gibi span'ı hedefleyen belirli bir CSS varsa Next.js 12'ye yükseltme, <Image> bileşeninin içindeki sarmalama öğesini yanlış eşleştirebilir. Seçiciyi .container span.item gibi belirli bir sınıfla sınırlandırarak ve ilgili bileşeni <span className="item" /> gibi bu sınıf adıyla güncelleyerek bunu önleyebilirsiniz.

Uygulamanızda next/image <div> etiketini hedefleyen özel CSS varsa, örneğin .container div, artık eşleşmeyebilir. .container span seçicisini güncelleyebilir veya tercihen <Image> bileşenini saran yeni bir <div className="wrapper"> ekleyebilir ve bunun yerine .container .wrapper gibi bunu hedefleyebilirsiniz.

className prop değişmez ve temel <img> öğesine aktarılmaya devam eder.

Daha fazla bilgi için belgelere bakın.

HMR connection now uses a WebSocket

Önceden Next.js, HMR olaylarını almak için sunucu tarafından gönderilen bir bağlantısı kullanıyordu. Next.js 12 artık bir WebSocket bağlantısı kullanıyor.

Bazı durumlarda Next.js geliştirme sunucusuna proxy istekleri gönderirken, yükseltme isteğinin doğru şekilde işlendiğinden emin olmanız gerekecektir. Örneğin, nginx adresinde aşağıdaki yapılandırmayı eklemeniz gerekir:

location /_next/webpack-hmr {
    proxy_pass http://localhost:3000/_next/webpack-hmr;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

Apache (2.x) kullanıyorsanız, sunucuya web soketlerini etkinleştirmek için aşağıdaki yapılandırmayı ekleyebilirsiniz. Port, host adı ve sunucu adlarını gözden geçirin.

<VirtualHost *:443>
 # ServerName yourwebsite.local
 ServerName "${WEBSITE_SERVER_NAME}"
 ProxyPass / http://localhost:3000/
 ProxyPassReverse / http://localhost:3000/
 # Next.js 12 uses websocket
 <Location /_next/webpack-hmr>
    RewriteEngine On
    RewriteCond %{QUERY_STRING} transport=websocket [NC]
    RewriteCond %{HTTP:Upgrade} websocket [NC]
    RewriteCond %{HTTP:Connection} upgrade [NC]
    RewriteRule /(.*) ws://localhost:3000/_next/webpack-hmr/$1 [P,L]
    ProxyPass ws://localhost:3000/_next/webpack-hmr retry=0 timeout=30
    ProxyPassReverse ws://localhost:3000/_next/webpack-hmr
 </Location>
</VirtualHost>

Örneğin, express gibi özel sunucularda, isteğin doğru şekilde iletildiğinden emin olmak için app.all adresini kullanmanız gerekebilir:

app.all('/_next/webpack-hmr', (req, res) => {
  nextjsRequestHandler(req, res)
})

Webpack 4 support has been removed

Eğer zaten webpack 5 kullanıyorsanız bu bölümü atlayabilirsiniz.

Next.js, Next.js 11'de webpack 5'i derleme için varsayılan olarak benimsemiştir. Webpack 5 yükseltme belgelerinde belirtildiği gibi Next.js 12, webpack 4 desteğini kaldırır.

Uygulamanız hala opt-out bayrağını kullanarak webpack 4 kullanıyorsa, artık webpack 5 yükseltme belgelerine bağlantı veren bir hata göreceksiniz.

`target` option deprecated

Eğer target next.config.js adresiniz yoksa bu bölümü atlayabilirsiniz.

Hedef seçeneği, bir sayfayı çalıştırmak için hangi bağımlılıkların gerekli olduğunu izlemeye yönelik yerleşik destek lehine kullanımdan kaldırılmıştır.

next build sırasında Next.js, uygulamanızın üretim sürümünü dağıtmak için gereken tüm dosyaları belirlemek üzere her sayfayı ve bağımlılıklarını otomatik olarak izleyecektir.

Şu anda serverless olarak ayarlanmış target seçeneğini kullanıyorsanız, lütfen yeni çıktıdan nasıl yararlanacağınıza ilişkin belgeleri okuyun.