Codemods

Codemod'lar kod tabanınızda programlı olarak çalışan dönüşümlerdir. Bu, her dosyayı manuel olarak gözden geçirmek zorunda kalmadan çok sayıda değişikliğin programlı olarak uygulanmasına olanak tanır.

Next.js, bir API güncellendiğinde veya kullanımdan kaldırıldığında Next.js kod tabanınızı yükseltmenize yardımcı olmak için Codemod dönüşümleri sağlar.

Usage

Terminalinizde, projenizin klasörüne gidin (cd) ve ardından çalıştırın:

Terminal

npx @next/codemod <transform> <path>

<transform> ve <path> adreslerinin uygun değerlerle değiştirilmesi.

transform - dönüşümün adı
path - dönüştürülecek dosyalar veya dizin
--dry Kuru çalıştırma yapın, hiçbir kod düzenlenmeyecektir
--print Karşılaştırma için değiştirilen çıktıyı yazdırır

Next.js Codemods

14.0

Migrate `ImageResponse` imports

`next-og-import`

Terminal

npx @next/codemod@latest next-og-import .

Bu codemod, Dinamik OG Görüntü Oluşturma kullanımı için next/server adresinden next/og adresine dönüşümleri taşır.

Örneğin:

import { ImageResponse } from 'next/server'

Dönüşür:

import { ImageResponse } from 'next/og'

Use `viewport` export

`metadata-to-viewport-export`

Terminal

npx @next/codemod@latest metadata-to-viewport-export .

Bu codemod, belirli viewport meta verilerini viewport dışa aktarmaya taşır.

Örneğin:

export const metadata = {
  title: 'My App',
  themeColor: 'dark',
  viewport: {
    width: 1,
  },
}

Dönüşür:

export const metadata = {
  title: 'My App',
}
 
export const viewport = {
  width: 1,
  themeColor: 'dark',
}

13.2

Use Built-in Font

`built-in-next-font`

Terminal

npx @next/codemod@latest built-in-next-font .

Bu codemod @next/font paketini kaldırır ve @next/font içe aktarımlarını yerleşik next/font'ye dönüştürür.

Örneğin:

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

Dönüşür:

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

13.0

Rename Next Image Imports

`next-image-to-legacy-image`

Terminal

npx @next/codemod@latest next-image-to-legacy-image .

Mevcut Next.js 10, 11 veya 12 uygulamalarındaki next/image içe aktarmalarını Next.js 13'te next/legacy/image olarak güvenli bir şekilde yeniden adlandırır. Ayrıca next/future/image adresini next/image olarak yeniden adlandırır.

Örneğin:

pages/index.js

import Image1 from 'next/image'
import Image2 from 'next/future/image'
 
export default function Home() {
  return (
    <div>
      <Image1 src="/test.jpg" width="200" height="300" />
      <Image2 src="/test.png" width="500" height="400" />
    </div>
  )
}

Dönüşür:

pages/index.js

// 'next/image' becomes 'next/legacy/image'
import Image1 from 'next/legacy/image'
// 'next/future/image' becomes 'next/image'
import Image2 from 'next/image'
 
export default function Home() {
  return (
    <div>
      <Image1 src="/test.jpg" width="200" height="300" />
      <Image2 src="/test.png" width="500" height="400" />
    </div>
  )
}

Migrate to the New Image Component

`next-image-experimental`

Terminal

npx @next/codemod@latest next-image-experimental .

Dangerously, satır içi stiller ekleyerek ve kullanılmayan sahne öğelerini kaldırarak next/legacy/image adresinden yeni next/image adresine geçiş yapar.

layout pervanesini kaldırır ve style adresini ekler.
objectFit pervanesini kaldırır ve style adresini ekler.
objectPosition pervanesini kaldırır ve style adresini ekler.
lazyBoundary pervanesini kaldırır.
lazyRoot pervanesini kaldırır.

Remove `<a>` Tags From Link Components

`new-link`

Terminal

npx @next/codemod@latest new-link .

Bağlantı Bileşenleri içindeki <a> etiketlerini kaldırın veya otomatik olarak sabitlenemeyen Bağlantılara bir legacyBehavior prop ekleyin.

Örneğin:

<Link href="/about">
  <a>About</a>
</Link>
// transforms into
<Link href="/about">
  About
</Link>
 
<Link href="/about">
  <a onClick={() => console.log('clicked')}>About</a>
</Link>
// transforms into
<Link href="/about" onClick={() => console.log('clicked')}>
  About
</Link>

Otomatik düzeltmenin uygulanamadığı durumlarda, legacyBehavior prop eklenir. Bu, uygulamanızın söz konusu bağlantı için eski davranışı kullanarak çalışmaya devam etmesini sağlar.

const Component = () => <a>About</a>
 
<Link href="/about">
  <Component />
</Link>
// becomes
<Link href="/about" legacyBehavior>
  <Component />
</Link>

11

Migrate from CRA

`cra-to-next`

Terminal

npx @next/codemod cra-to-next

Bir Create React App projesini Next.js'ye geçirir; bir Pages Router ve davranışla eşleşmesi için gerekli yapılandırmayı oluşturur. SSR sırasında window kullanımı nedeniyle uyumluluğun bozulmasını önlemek için başlangıçta yalnızca istemci tarafı oluşturmadan yararlanılır ve Next.js'ye özgü özelliklerin kademeli olarak benimsenmesine izin vermek için sorunsuz bir şekilde etkinleştirilebilir.

Lütfen bu dönüşümle ilgili geri bildirimlerinizi adresindeki bu tartışmada paylaşın.

10

Add React imports

`add-missing-react-import`

Terminal

npx @next/codemod add-missing-react-import

Yeni React JSX dönüşümü 'un çalışması için React 'u içe aktarmayan dönüşüm dosyalarının içe aktarmayı içermesi gerekir.

Örneğin:

my-component.js

export default class Home extends React.Component {
  render() {
    return <div>Hello World</div>
  }
}

Dönüşür:

my-component.js

import React from 'react'
export default class Home extends React.Component {
  render() {
    return <div>Hello World</div>
  }
}

9

Transform Anonymous Components into Named Components

`name-default-component`

Terminal

npx @next/codemod name-default-component

9 ve üzeri sürümler.

Hızlı Yenileme ile çalıştıklarından emin olmak için anonim bileşenleri adlandırılmış bileşenlere dönüştürür.

Örneğin:

my-component.js

export default function () {
  return <div>Hello World</div>
}

Dönüşür:

my-component.js

export default function MyComponent() {
  return <div>Hello World</div>
}

Bileşen, dosyanın adına göre deve hizasında bir ada sahip olur ve ok işlevleriyle de çalışır.

8

Transform AMP HOC into page config

`withamp-to-config`

Terminal

npx @next/codemod withamp-to-config

withAmp HOC'yi Next.js 9 sayfa yapılandırmasına dönüştürür.

Örneğin:

// Before
import { withAmp } from 'next/amp'
 
function Home() {
  return <h1>My AMP Page</h1>
}
 
export default withAmp(Home)

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

6

Use `withRouter`

`url-to-withrouter`

Terminal

npx @next/codemod url-to-withrouter

Üst düzey sayfalarda kullanımdan kaldırılan otomatik olarak enjekte edilen url özelliğini withRouter ve enjekte ettiği router özelliğini kullanmaya dönüştürür. Daha fazlasını buradan okuyun: https://nextjs.org/docs/messages/url-deprecated

Örneğin:

From

import React from 'react'
export default class extends React.Component {
  render() {
    const { pathname } = this.props.url
    return <div>Current pathname: {pathname}</div>
  }
}

import React from 'react'
import { withRouter } from 'next/router'
export default withRouter(
  class extends React.Component {
    render() {
      const { pathname } = this.props.router
      return <div>Current pathname: {pathname}</div>
    }
  }
)

Bu bir vakadır. Dönüştürülen (ve test edilen) tüm vakalar __testfixtures__ dizininde bulunabilir .