Cozy Coding

Nextjs 14에서 Codemods 사용하는 방법 간단 가이드

Nextjs 14에서 Codemods 사용하는 방법 간단 가이드
Cozy CodingPosted On Jul 23, 20246 min read

코드 모드

코드 모드는 코드베이스에서 프로그래밍적으로 실행되는 변환입니다. 이를 통해 많은 변경 사항이 수동으로 모든 파일을 일일이 확인하지 않고 프로그램적으로 적용될 수 있습니다.

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

사용법

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

npx @next/codemod <transform> <path>

transform과 path를 적절한 값으로 대체해주세요.

  • transform - 변환 이름
  • path - 변환할 파일 또는 디렉토리
  • --dry - 드라이 런, 코드가 편집되지 않습니다
  • --print - 변경된 출력물을 비교하기 위해 인쇄합니다

Next.js Codemods

14.0

이미지응답 가져오기 이주

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

이 코드 수정은 동적 OG 이미지 생성을 위해 next/server에서 next/og로 transforms imports를 이동합니다.

예를 들어:

import { ImageResponse } from 'next/server'

변환 결과는:

import { ImageResponse } from 'next/og'

viewport export 사용하기

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

이 코드 모드는 특정 viewport 메타데이터를 viewport export로 이주합니다.

예를 들면:

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

13.2

내장 폰트 사용

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

다음 이미지 임포트 이름 변경

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로 변경합니다.

예를 들어:

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

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

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

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

  • 레이아웃 prop을 제거하고 스타일을 추가합니다.
  • objectFit prop을 제거하고 스타일을 추가합니다.
  • objectPosition prop을 제거하고 스타일을 추가합니다.
  • lazyBoundary prop을 제거합니다.
  • lazyRoot prop을 제거합니다.

링크 구성 요소에서 a 태그 제거하기

npx @next/codemod@latest new-link .

링크 구성 요소 내의 a 태그를 제거하거나 자동으로 수정할 수 없는 링크에 legacyBehavior prop을 추가하십시오.

예시:

[링크](/about)
About
[/링크]
 
[링크](/about)
About
[/링크]
 
자동 수정이 적용되지 않는 경우, legacyBehavior 속성이 추가됩니다. 이를 통해 해당 링크에 대해 이전 동작을 유지하면서 응용 프로그램이 작동할 수 있습니다.

const Component = () => <a>About</a>
 
[링크](/about)
<Component />
[/링크]
// 변환됨
[링크](/about, legacyBehavior)
<Component />
[/링크]

### 11

CRA에서 이전하기

npx @next/codemod cra-to-next

이 명령은 Create React App 프로젝트를 Next.js로 이전하는데 사용됩니다. 페이지 라우터를 만들고 동작을 맞추기 위한 필요한 설정을 추가합니다. 초기에는 클라이언트 측 렌더링만 사용하여 SSR 중에 창을 사용하는 문제를 방지해 호환성이 깨지는 것을 막고, Next.js 특정 기능을 점진적으로 채택할 수 있도록 원활하게 활성화될 수 있습니다.

이 변환과 관련된 모든 피드백을 공유해주세요. 해당 토론에서 피드백을 남겨 주세요.

10

React Imports 추가하기

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

이 명령어는 React를 가져오지 않은 파일을 변환하여 새로운 React JSX 변환 작업이 작동하도록 합니다.

예를 들어:

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

아래와 같이 변환됩니다.

9

익명 컴포넌트를 명명된 컴포넌트로 변환하기

npx @next/codemod name-default-component

버전 9부터 적용 가능합니다.

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

예를 들어:

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

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

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

8

AMP HOC을 페이지 구성으로 변환하기

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 사용하기

npx @next/codemod url-to-withrouter

최상위 페이지에 자동으로 삽입된 url 속성을 withRouter 및 해당 주입하는 router 속성을 사용하도록 변경합니다. 자세한 내용은 여기를 참조해주세요: URL Deprecation - Next.js

예시 코드:

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

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