ReactNextCentral

코드 변환도구(Codemods)

Published on
새로운 기능이 출시될 때 Next.js 코드베이스를 업그레이드하기 위해 코드 변환도구를 사용합니다.
Table of Contents

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

API가 업데이트되거나 폐기될 때 Next.js 코드베이스를 업그레이드하는 데 도움을 주기 위해 Next.js는 코드 변환도구를 제공합니다.

사용법

터미널에서 프로젝트 폴더로 이동(cd)한 다음 다음을 실행합니다.

터미널
npx @next/codemod <transform> <path>

<transform> 및 <path>를 적절한 값으로 대체합니다.

  • transform - 변환 이름
  • path - 변환할 파일 또는 디렉토리
  • --dry 건조 실행을 수행하며 코드는 편집되지 않습니다.
  • --print 비교를 위해 변경된 출력을 출력합니다.

Next.js 코드 변환도구

13.2

기본 폰트 사용

built-in-next-font
터미널
npx @next/codemod@latest built-in-next-font .

이 코드 변환도구는 @next/font 패키지를 제거하고 @next/font 임포트를 기본 내장된 next/font로 변환합니다.

예를 들면:

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

이렇게 변환됩니다.

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

13.0

Next 이미지 임포트 이름 변경

next-image-to-legacy-image
터미널
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>
  )
}

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

next-image-experimental
터미널
npx @next/codemod@latest next-image-experimental .

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

  • layout 속성을 제거하고 style을 추가합니다.
  • objectFit 속성을 제거하고 style을 추가합니다.
  • objectPosition 속성을 제거하고 style을 추가합니다.
  • lazyBoundary 속성을 제거합니다.
  • lazyRoot 속성을 제거합니다.
터미널
npx @next/codemod@latest new-link .

Link 컴포넌트 내의 <a> 태그를 제거하거나, 자동 수정이 불가능한 링크에 legacyBehavior 속성을 추가합니다.

예를 들면:

<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 속성이 추가됩니다. 이를 통해 해당 특정 링크에 대해 이전 동작을 사용하여 앱이 계속 작동하게 됩니다.

const Component = () => <a>About</a>

<Link href="/about">
  <Component />
</Link>
// 이렇게 변환됩니다
<Link href="/about" legacyBehavior>
  <Component />
</Link>

11

CRA에서 마이그레이션

cra-to-next
터미널
npx @next/codemod cra-to-next

Create React App 프로젝트를 Next.js로 마이그레이션하며, Pages Router와 동작을 일치시키기 위한 필요한 설정을 생성합니다. 클라이언트 측만 렌더링이 초기에 활용되어 SSR 도중 window 사용으로 인한 호환성이 깨지는 것을 방지하며, Next.js 특정 기능의 점진적 채택을 허용하도록 원활하게 활성화될 수 있습니다.

이 변환과 관련한 피드백은 이 토론에서 공유해 주세요.

10

React import 추가

add-missing-react-import
터미널
npx @next/codemod add-missing-react-import

새로운 React JSX 변환이 작동하도록 React를 import 하지 않은 파일을 변환합니다.

예를 들면:

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
터미널
npx @next/codemod name-default-component

버전 9 이상.

익명 컴포넌트를 명명된 컴포넌트로 변환하여 Fast Refresh와 함께 작동하도록 합니다.

예를 들면:

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

이렇게 변환됩니다.

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

컴포넌트는 파일 이름을 기반으로 camel-case된 이름을 가지며, 화살표 함수에도 작동합니다.

8

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

withamp-to-config
터미널
npx @next/codemod withamp-to-config

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

예시:

// 변환 전
import { withAmp } from 'next/amp'

function Home() {
  return <h1>나의 AMP 페이지</h1>
}

export default withAmp(Home)

// 변환 후
export default function Home() {
  return <h1>나의 AMP 페이지</h1>
}

export const config = {
  amp: true,
}

6

withRouter 사용

url-to-withrouter
터미널
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>현재 경로: {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>현재 경로: {pathname}</div>
    }
  }
)

이것은 하나의 경우입니다. 변환되는 모든 경우는 (그리고 테스트 된) __testfixtures__ 디렉터리에서 찾을 수 있습니다.