Version 11

버전 11로 업그레이드하려면 다음 명령어를 실행하세요:

npm i next@11 react@17 react-dom@17

yarn add next@11 react@17 react-dom@17

pnpm up next@11 react@17 react-dom@17

bun add next@11 react@17 react-dom@17

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

Webpack 5

이제 모든 Next.js 애플리케이션에 대해 Webpack 5가 기본값으로 설정됩니다. 커스텀 Webpack 구성을 하지 않았다면, 애플리케이션은 이미 Webpack 5를 사용 중입니다. 커스텀 Webpack 구성이 있는 경우, 업그레이드 지침은 Next.js webpack 5 문서를 참조하세요.

Cleaning the distDir is now a default

빌드 출력 디렉토리(기본값은 .next)가 이제 기본적으로 Next.js 캐시를 제외하고 정리됩니다. 자세한 내용은 빌드 출력 디렉토리 정리 RFC (opens in a new tab)를 참조하세요.

애플리케이션이 이전에 이 동작에 의존하고 있었다면 next.config.js 에 cleanDistDir: false 플래그를 추가하여 새로운 기본 동작을 비활성화할 수 있습니다.

PORT is now supported for next dev and next start

Next.js 11은 애플리케이션이 실행되는 포트를 설정하기 위해 PORT 환경 변수를 지원합니다. 여전히 -p/--port 사용이 권장되지만, 어떤 이유로든 -p 를 사용할 수 없는 경우 PORT 를 대안으로 사용할 수 있습니다:

예시:

PORT=4000 next start

next.config.js customization to import images

Next.js 11은 next/image 를 사용한 정적 이미지 가져오기를 지원합니다. 이 새로운 기능은 이미지 가져오기를 처리할 수 있어야 합니다. 이전에 next-images 또는 next-optimized-images 패키지를 추가했다면 새로운 내장 지원을 사용하거나 기능을 비활성화할 수 있습니다:

module.exports = {
  images: {
    disableStaticImages: true,
  },
}

Remove super.componentDidCatch() from pages/_app.js

next/app 컴포넌트의 componentDidCatch 는 더 이상 필요하지 않기 때문에 Next.js 9에서 사용 중단되었으며, 이후로는 no-op이었습니다. Next.js 11에서는 이것이 제거되었습니다.

만약 pages/_app.js 에 커스텀 componentDidCatch 메서드가 있다면, 더 이상 필요하지 않으므로 super.componentDidCatch 를 제거할 수 있습니다.

Remove Container from pages/_app.js

이 익스포트는 더 이상 필요하지 않기 때문에 Next.js 9에서 사용 중단되었으며, 개발 중 경고와 함께 no-op이었습니다. Next.js 11에서는 이것이 제거되었습니다.

만약 pages/_app.js가 next/app에서 Container를 가져오고 있다면, Container를 제거할 수 있습니다. 자세한 내용은 문서를 참조하세요.

Remove props.url usage from page components

이 속성은 Next.js 4에서 사용 중단되었으며, 이후 개발 중 경고를 표시했습니다. getStaticProps / getServerSideProps 도입으로 이 메서드들은 이미 props.url 사용을 금지했습니다. Next.js 11에서는 이것이 완전히 제거되었습니다.

자세한 내용은 문서를 참조하세요.

Remove unsized property on next/image

next/image 의 unsized 속성은 Next.js 10.0.1에서 사용 중단되었습니다. 대신 layout="fill" 을 사용할 수 있습니다. Next.js 11에서는 unsized 가 제거되었습니다.

Remove modules property on next/dynamic

next/dynamic 의 modules 및 render 옵션은 Next.js 9.5에서 사용 중단되었습니다. 이는 next/dynamic API를 React.lazy 와 더 가깝게 만들기 위함이었습니다. Next.js 11에서는 modules 및 render 옵션이 제거되었습니다.

이 옵션은 Next.js 8 이후 문서에서 언급되지 않았기 때문에 애플리케이션에서 사용 중일 가능성은 적습니다.

만약 애플리케이션이 modules 와 render 를 사용하고 있다면, 문서를 참조하세요.

Remove Head.rewind

Head.rewind 는 Next.js 9.5 이후로 no-op이었으며, Next.js 11에서는 제거되었습니다. Head.rewind 사용을 안전하게 제거할 수 있습니다.

Moment.js locales excluded by default

Moment.js는 기본적으로 많은 로케일에 대한 번역을 포함합니다. Next.js는 이제 Moment.js를 사용하는 애플리케이션의 번들 크기를 최적화하기 위해 기본적으로 이러한 로케일을 제외합니다.

특정 로케일을 로드하려면 다음 코드를 사용하세요:

import moment from 'moment'
import 'moment/locale/ja'
 
moment.locale('ja')

새로운 동작을 원하지 않는 경우 next.config.js 에 excludeDefaultMomentLocales: false 를 추가하여 이 새로운 기본값을 옵트아웃할 수 있지만, 이 새로운 최적화를 비활성화하지 않는 것이 번들 크기를 크게 줄이기 때문에 매우 권장됩니다.

Update usage of router.events

렌더링 중에 router.events 에 접근하는 경우, Next.js 11에서는 프리렌더링 중 router.events 가 더 이상 제공되지 않습니다. useEffect 에서 router.events 에 접근하는지 확인하세요:

useEffect(() => {
  const handleRouteChange = (url, { shallow }) => {
    console.log(
      `App is changing to ${url} ${
        shallow ? 'with' : 'without'
      } shallow routing`,
    )
  }
 
  router.events.on('routeChangeStart', handleRouteChange)
 
  // 컴포넌트가 언마운트되면 이벤트에서 구독 해제
  // `off` 메서드를 사용하여:
  return () => {
    router.events.off('routeChangeStart', handleRouteChange)
  }
}, [router])

애플리케이션이 공개되지 않은 내부 속성인 router.router.events 를 사용하는 경우 router.events 를 사용해야 합니다.

React 16 to 17

React 17은 JSX를 사용할 때 import React from 'react'를 생략할 수 있는 새로운 JSX Transform (opens in a new tab)를 도입했습니다. React 17을 사용할 때 Next.js는 자동으로 새로운 변환을 사용합니다. 이 변환은 이전 Next.js 구현의 의도하지 않은 부작용이었던 React 변수를 전역으로 만들지 않습니다. React를 임포트하지 않고 실수로 사용한 경우 자동으로 수정할 수 있는 codemod가 제공됩니다.

대부분의 애플리케이션은 이미 최신 버전의 React를 사용하고 있으며, Next.js 11에서는 최소 React 버전이 17.0.2로 업데이트되었습니다.

업그레이드하려면 다음 명령어를 실행하세요:

npm install react@latest react-dom@latest

또는 yarn 을 사용하여:

yarn add react@latest react-dom@latest