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

Version 13

Upgrading from 12 to 13

Next.js 버전 13으로 업데이트하려면, 선호하는 패키지 매니저를 사용해 다음 명령어를 실행하세요:

Terminal
npm i next@13 react@latest react-dom@latest eslint-config-next@13
Terminal
yarn add next@13 react@latest react-dom@latest eslint-config-next@13
Terminal
pnpm i next@13 react@latest react-dom@latest eslint-config-next@13
Terminal
bun add next@13 react@latest react-dom@latest eslint-config-next@13

참고: TypeScript를 사용하는 경우, @types/react 와 @types/react-dom 도 최신 버전으로 업그레이드해야 합니다.

v13 Summary

  • 지원되는 브라우저가 Internet Explorer를 제외하고 최신 브라우저를 대상으로 변경되었습니다.
  • 최소 Node.js 버전이 12.22.0에서 16.14.0으로 상향되었습니다. 이는 12.x 및 14.x 버전이 지원 종료되었기 때문입니다.
  • 최소 React 버전이 17.0.2에서 18.2.0으로 상향되었습니다.
  • swcMinify 설정 속성이 false에서 true로 변경되었습니다. 자세한 내용은 Next.js 컴파일러를 참조하세요.
  • next/image import가 next/legacy/image로, next/future/image import가 next/image로 변경되었습니다. import를 안전하게 자동으로 변경해주는 codemod가 제공됩니다.
  • next/link의 자식으로 <a> 태그를 사용할 수 없습니다. 레거시 동작을 사용하려면 legacyBehavior prop을 추가하거나 <a> 태그를 제거하여 업그레이드하세요. 코드를 자동으로 업그레이드 해주는 codemod가 제공됩니다.
  • target 설정 속성이 제거되고 출력 파일 추적으로 대체되었습니다.

Migrating shared features

Next.js 13은 새로운 기능과 규칙을 갖춘 app 디렉토리를 도입했습니다. 그러나 Next.js 13으로 업그레이드 하기 위해 새로운 app 디렉토리를 반드시 사용해야 하는 것은 아닙니다.

pages를 계속 사용할 수 있으며, 업데이트된 Image 컴포넌트, Link 컴포넌트, Script 컴포넌트, 및 폰트 최적화와 같은 새 기능을 사용할 수 있습니다.

<Image/> Component

Next.js 12는 임시 import인 next/future/image로 이미지 컴포넌트에 많은 개선 사항을 도입했습니다. 이러한 개선 사항에는 클라이언트 사이드 자바스크립트 감소, 이미지 확장 및 스타일링의 용이성, 더 나은 접근성, 및 브라우저의 네이티브 지연 로딩이 포함되었습니다.

Next.js 13부터 이러한 새로운 동작은 next/image의 기본 동작이 되었습니다.

새로운 Image 컴포넌트로 마이그레이션하는 데 도움이 되는 두 가지 codemod가 있습니다:

  • next-image-to-legacy-image: 이 codemod는 next/image import를 next/legacy/image로 안전하게 자동으로 이름을 변경하여 Next.js 12와 동일한 동작을 유지합니다. Next.js 13으로 빠르게 자동으로 업데이트를 하려면 이 codemod를 실행하는 것이 좋습니다.

  • next-image-experimental: 이전 codemod를 실행한 후, 이 실험적인 codemod를 선택적으로 실행하여 next/legacy/image를 새로운 next/image로 업그레이드할 수 있습니다. 이는 사용하지 않는 속성을 제거하고 인라인 스타일을 추가합니다. 이 codemod는 실험적이고 정적 사용(예: <Image src={img} layout="responsive" />)만을 다루며 동적 사용(예: <Image {...props} />)은 다루지 않습니다.

또한, 마이그레이션 가이드를 따라 수동으로 업데이트할 수 있으며 레거시 비교도 참조하세요.

<Link> Component

<Link> 컴포넌트는 더 이상 <a> 태그를 수동으로 추가할 필요가 없습니다. 이 동작은 버전 12.2 (opens in a new tab)에서 실험적인 옵션으로 추가되었으며 이제 기본 동작이 되었습니다. Next.js 13에서는 <Link>가 항상 <a> 태그를 렌더링하고 기본 태그에 props를 전달할 수 있습니다.

예를 들어:

import Link from 'next/link'
 
// Next.js 12: `<a>` 태그가 자식 요소로 중첩되지 않으면 브라우저에서 링크로 렌더링되지 않습니다.
<Link href="/about">
  <a>About</a>
</Link>
 
// Next.js 13: `<Link>`는 항상 내부적으로 `<a>` 태그를 렌더링합니다.
<Link href="/about">
  About
</Link>

링크를 Next.js 13으로 업그레이드하려면 new-link codemod를 사용할 수 있습니다.

<Script> Component

next/script의 동작은 pages와 app 모두를 지원하도록 업데이트되었습니다. app을 점진적으로 도입하려면 업그레이드 가이드를 읽어보세요.

Font Optimization

이전의 Next.js는 폰트 CSS를 인라인으로 포함하여 폰트를 최적화하는 데 도움을 주었습니다. 버전 13에서는 새 next/font 모듈을 도입하여 뛰어난 성능과 개인 정보 보호를 유지하면서도 폰트 로딩 경험을 사용자 맞춤으로 설정할 수 있습니다.

next/font의 사용 방법을 알아보려면 폰트 최적화를 참조하세요.

Version 14Version 12