Upgrading to Version 9

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

Terminal 
npm i next@9
Terminal 
yarn add next@9
Terminal 
pnpm up next@9
Terminal 
bun add next@9

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

Production Deployment on Vercel

Daha önce routes adresini dinamik rotalar için vercel.json dosyanızda yapılandırdıysanız, Next.js 9'un yeni Dinamik Yönlendirme özelliğinden yararlanırken bu kurallar kaldırılabilir.

Next.js 9'un dinamik rotaları Vercel üzerinde otomatik olarak yapılandırılır ve herhangi bir vercel.json özelleştirmesi gerektirmez.

Dinamik Yönlendirme hakkında daha fazla bilgiyi buradan okuyabilirsiniz.

Check your Custom App File (pages/_app.js)

Daha önce Custom <App> örneğini kopyaladıysanız, getInitialProps adresinizi kaldırabilirsiniz.

getInitialProps adresini pages/_app.js adresinden kaldırmak (mümkün olduğunda) yeni Next.js özelliklerinden yararlanmak için önemlidir!

Aşağıdaki getInitialProps hiçbir işe yaramaz ve kaldırılabilir:

class MyApp extends App {
  // Remove me, I do nothing!
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}
 
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
 
    return { pageProps }
  }
 
  render() {
    // ... etc
  }
}

Breaking Changes

@zeit/next-typescript is no longer necessary

Next.js artık @zeit/next-typescript kullanımını yok sayacak ve kaldırmanız için sizi uyaracaktır. Lütfen bu eklentiyi next.config.js adresinizden kaldırın.

Özel .babelrc adresinizden @zeit/next-typescript/babel referanslarını kaldırın (varsa).

Kullanımı fork-ts-checker-webpack-plugin next.config.js adresinden de kaldırılmalıdır.

TypeScript Tanımları next paketiyle birlikte yayınlanır, bu nedenle çakışacakları için @types/next paketini kaldırmanız gerekir.

Aşağıdaki tipler farklıdır:

Bu liste, yükseltme yapmanıza yardımcı olmak için topluluk tarafından oluşturulmuştur, başka farklılıklar bulursanız lütfen diğer kullanıcılara yardımcı olmak için bu listeye bir çekme talebi gönderin.

Kimden?

import { NextContext } from 'next'
import { NextAppContext, DefaultAppIProps } from 'next/app'
import { NextDocumentContext, DefaultDocumentIProps } from 'next/document'

için

import { NextPageContext } from 'next'
import { AppContext, AppInitialProps } from 'next/app'
import { DocumentContext, DocumentInitialProps } from 'next/document'

The config key is now an export on a page

Artık bir sayfadan config adlı özel bir değişkeni dışa aktaramazsınız (örn. export { config } / export const config ...). Bu dışa aktarılan değişken artık Opt-in AMP ve API Route özellikleri gibi sayfa düzeyinde Next.js yapılandırmasını belirtmek için kullanılmaktadır.

Next.js amaçlı olmayan bir config dışa aktarımını farklı bir şeye yeniden adlandırmanız gerekir.

next/dynamic no longer renders "loading..." by default while loading

Dinamik bileşenler yüklenirken varsayılan olarak hiçbir şey oluşturmaz. Yine de loading özelliğini ayarlayarak bu davranışı özelleştirebilirsiniz: 

import dynamic from 'next/dynamic'
 
const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello2'),
  {
    loading: () => <p>Loading</p>,
  }
)

withAmp has been removed in favor of an exported configuration object

Next.js artık sayfa düzeyinde yapılandırma kavramına sahiptir, bu nedenle withAmp üst düzey bileşeni tutarlılık için kaldırılmıştır.

Bu değişiklik, Next.js projenizin kök dizininde aşağıdaki komutlar çalıştırılarak otomatik olarak taşınabilir:

Terminal 
curl -L https://github.com/vercel/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/withamp-to-config.js npx jscodeshift -t ./withamp-to-config.js pages/**/*.js

Bu geçişi elle yapmak veya codemod'un ne üreteceğini görmek için aşağıya bakın:

Önce

import { withAmp } from 'next/amp'
 
function Home() {
  return <h1>My AMP Page</h1>
}
 
export default withAmp(Home)
// or
export default withAmp(Home, { hybrid: true })

Sonra

export default function Home() {
  return <h1>My AMP Page</h1>
}
 
export const config = {
  amp: true,
  // or
  amp: 'hybrid',
}

next export no longer exports pages as index.html

Önceden, pages/about.js adresini dışa aktarmak out/about/index.html ile sonuçlanırdı. Bu davranış out/about.html ile sonuçlanacak şekilde değiştirilmiştir.

Aşağıdaki içeriğe sahip bir next.config.js oluşturarak önceki davranışa geri dönebilirsiniz:

next.config.js 
module.exports = {
  trailingSlash: true,
}

pages/api/ is treated differently

pages/api/ adresindeki sayfalar artık API Routes olarak kabul edilmektedir. Bu dizindeki sayfalar artık istemci tarafı paketi içermeyecektir.

Deprecated Features

next/dynamic has deprecated loading multiple modules at once

Birden fazla modülü aynı anda yükleme özelliği, React'in uygulamasına (React.lazy ve Suspense) daha yakın olmak için next/dynamic 'da kullanımdan kaldırılmıştır.

Bu davranışa dayanan kodu güncellemek nispeten kolaydır! Uygulamanızı taşımanıza yardımcı olmak için bir önce/sonra örneği sağladık:

Önce

import dynamic from 'next/dynamic'
 
const HelloBundle = dynamic({
  modules: () => {
    const components = {
      Hello1: () => import('../components/hello1').then((m) => m.default),
      Hello2: () => import('../components/hello2').then((m) => m.default),
    }
 
    return components
  },
  render: (props, { Hello1, Hello2 }) => (
    <div>
      <h1>{props.title}</h1>
      <Hello1 />
      <Hello2 />
    </div>
  ),
})
 
function DynamicBundle() {
  return <HelloBundle title="Dynamic Bundle" />
}
 
export default DynamicBundle

Sonra

import dynamic from 'next/dynamic'
 
const Hello1 = dynamic(() => import('../components/hello1'))
const Hello2 = dynamic(() => import('../components/hello2'))
 
function HelloBundle({ title }) {
  return (
    <div>
      <h1>{title}</h1>
      <Hello1 />
      <Hello2 />
    </div>
  )
}
 
function DynamicBundle() {
  return <HelloBundle title="Dynamic Bundle" />
}
 
export default DynamicBundle