🎉 공식문서 번역에 참여해주세요.  🐙  Github 바로가기  🐙
Docs
App Router
Building Your Application
Upgrading
Codemods

Codemods

Codemods는 코드베이스에서 프로그래밍 방식으로 실행되는 변환입니다. 이를 통해 많은 수의 변경 사항을 수동으로 모든 파일을 검토하지 않고도 프로그래밍 방식으로 적용할 수 있습니다.

Next.js는 API가 업데이트되거나 더 이상 사용되지 않을 때 Next.js 코드베이스를 업그레이드하는 데 도움이 되는 Codemod 변환을 제공합니다.

사용법

터미널에서 프로젝트 폴더로 이동한 후 다음 명령어를 실행하세요:

Terminal
npx @next/codemod <transform> <path>

적절한 값으로 <transform>과 <path>를 교체하세요.

  • transform - 변환의 이름
  • path - 변환할 파일 또는 디렉터리
  • --dry 실행 테스트, 코드가 수정되지 않음
  • --print 변경된 출력을 비교를 위해 출력

Next.js Codemods

14.0

ImageResponse 가져오기 변환

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

이 codemod는 Dynamic OG Image Generation 사용을 위해 next/server에서 next/og로 변환을 가져옵니다.

예:

import { ImageResponse } from 'next/server'

변환 후:

import { ImageResponse } from 'next/og'

viewport export 사용

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

이 codemod는 특정 viewport 메타데이터를 viewport export로 마이그레이션합니다.

예:

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

변환 후:

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

13.2

내장 폰트 사용

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

이 codemod는 @next/font 패키지를 제거하고 @next/font 가져오기를 내장 next/font로 변환합니다.

예:

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

변환 후:

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

13.0

Next Image 가져오기 이름 변경

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

Next.js 10, 11 또는 12 애플리케이션의 next/image 가져오기를 Next.js 13의 next/legacy/image로 안전하게 이름을 변경합니다. 또한 next/future/image를 next/image로 이름을 변경합니다.

예:

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>
  )
}

변환 후:

pages/index.js
// 'next/image'가 'next/legacy/image'로 변경됩니다
import Image1 from 'next/legacy/image'
// 'next/future/image'가 '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>
  )
}

새로운 Image 컴포넌트로 마이그레이션

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

인라인 스타일을 추가하고 사용되지 않는 props를 제거하여 next/legacy/image에서 새로운 next/image로 위험하게 마이그레이션합니다.

  • layout prop을 제거하고 style을 추가합니다.
  • objectFit prop을 제거하고 style을 추가합니다.
  • objectPosition prop을 제거하고 style을 추가합니다.
  • lazyBoundary prop을 제거합니다.
  • lazyRoot prop을 제거합니다.

Link 컴포넌트에서 <a> 태그 제거

new-link
Terminal
npx @next/codemod@latest new-link .

Link Components 내의 <a> 태그를 제거하거나 자동으로 수정할 수 없는 링크에 legacyBehavior prop을 추가합니다.

예:

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

자동 수정을 적용할 수 없는 경우 legacyBehavior prop이 추가됩니다. 이를 통해 특정 링크에 대해 이전 동작을 유지하면서 앱이 계속 작동할 수 있습니다.

const Component = () => <a>About</a>
 
<Link href="/about">
  <Component />
</Link>
// 변환 후
<Link href="/about" legacyBehavior>
  <Component />
</Link>

11

CRA에서 마이그레이션

cra-to-next
Terminal
npx @next/codemod cra-to-next

Create React App 프로젝트를 Next.js로 마이그레이션합니다. Pages Router 및 필요한 구성을 생성하여 동작을 일치시킵니다. 클라이언트 측 전용 렌더링은 SSR 중 window 사용으로 인한 호환성 문제를 방지하기 위해 처음에는 활용되며, Next.js 특정 기능을 점진적으로 도입할 수 있도록 매끄럽게 활성화할 수 있습니다.

이 변환과 관련된 피드백을 이 토론에서 (opens in a new tab) 공유해주세요.

10

React 가져오기 추가

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

React JSX transform (opens in a new tab) 작업을 위해 React를 가져오지 않는 파일을 변환하여 가져오기를 포함합니다.

예:

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

변환 후:

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

9

익명 컴포넌트를 이름이 있는 컴포넌트로 변환

name-default-component
Terminal
npx @next/codemod name-default-component

버전 9 이상.

익명 컴포넌트를 이름이 있는 컴포넌트로 변환하여 Fast Refresh (opens in a new tab)와 함께 작동하도록 합니다.

예:

my-component.js
export default function () {
  return <div>Hello World</div>
}

변환 후:

my-component.js
export default function MyComponent() {
  return <div>Hello World</div>
}

컴포넌트는 파일 이름을 기반으로 카멜 케이스 이름을 가지며, 화살표 함수와도 작동합니다.

8

AMP HOC를 페이지 설정으로 변환

withamp-to-config
Terminal
npx @next/codemod withamp-to-config

withAmp HOC를 Next.js 9 페이지 설정으로 변환합니다.

예:

// 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

withRouter 사용

url-to-withrouter
Terminal
npx @next/codemod url-to-withrouter

상위 레벨 페이지에서 자동으로 주입된 url 속성을 사용하여 withRouter 및 주입된 router 속성을 사용하도록 변환합니다. 자세한 내용은 https://nextjs.org/docs/messages/url-deprecated에서 확인하세요.

예:

From
import React from 'react'
export default class extends React.Component {
  render() {
    const { pathname } = this.props.url
    return <div>Current pathname: {pathname}</div>
  }
}
To
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>
    }
  },
)

이는 한 가지 사례입니다. 변환되고 테스트된 모든 사례는 __testfixtures__ 디렉터리 (opens in a new tab)에서 찾을 수 있습니다.

UpgradingVersion 15