문서
App Router 사용하기
애플리케이션 구축하기
업그레이드
Codemods

코드모드 (Codemods)

코드모드는 코드베이스에서 프로그래밍 방식으로 실행되는 변환입니다. 이를 통해 모든 파일을 수동으로 살펴볼 필요 없이 프로그래밍 방식으로 대량의 변경 사항을 적용할 수 있습니다.

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

사용법

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

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

<transform>과 <path>를 적절한 값으로 바꿉니다.

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

Next.js 코드모드

14.0

ImageResponse 임포트 마이그레이션

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

이 코드모드는 동적 OG 이미지 생성 사용을 위해 next/server에서 next/og로의 임포트를 변환합니다.

예를 들어:

import { ImageResponse } from "next/server";

다음과 같이 변환됩니다:

import { ImageResponse } from "next/og";

viewport 내보내기 사용

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

이 코드모드는 특정 뷰포트 메타데이터를 viewport 내보내기로 마이그레이션합니다.

예를 들어:

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 .

이 코드모드는 @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 컴포넌트 내부의 <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로 마이그레이션합니다; 페이지 라우터를 생성하고 동작을 일치시키는 데 필요한 구성을 만듭니다. SSR 중 window 사용으로 인한 호환성 문제를 방지하기 위해 초기에는 클라이언트 사이드 전용 렌더링이 활용되며, 이를 원활하게 활성화하여 Next.js 특정 기능을 점진적으로 채택할 수 있습니다.

이 변환과 관련된 피드백은 이 논의에서 공유해 주세요.

10

React 임포트 추가

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

새로운 React JSX 변환이 작동하도록 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와 함께 작동하도록 합니다.

예를 들어:

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 페이지 구성으로 변환합니다.

예를 들어:

// 이전
import { withAmp } from "next/amp";
 
function Home() {
  return <h1>My AMP Page</h1>;
}
 
export default withAmp(Home);
// 이후
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__ 디렉토리에서 찾을 수 있습니다.

업그레이드버전 15