Next.js 10, 뭐가 바뀌었을까?

Nextjs 공식 블로그의 Next.js 10를 번역 및 요약한 글입니다.
의역 및 개인적인 의견이 많이 추가될 예정입니다.

와! Next.js 10!

지난 Next conf와 함께 Next.js 10이 공개되었다.

언제나 실망시키지 않는 Vercel이 이번엔 어떤 재미난 기능들을 준비했을지 살펴보자.

1. Built-in Image Component and Automatic Image Optimization

import Image from 'next/image'

<Image src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture">

웹 이미지를 최적화하기 위해서 다음 사항들을 고려해야한다. : 크기, 용량, Lazy loading, 최신 이미지 포맷

next/image는 이 모든 것을 자동으로 처리해준다.

정말 유용해보여서 우리 프로젝트에도 빠르게 도입할 예정이다.

• 자동 lazy loading 적용
• image dimension(width, height)를 통한 layout shift 방지
• 반응형 자동 대응 (이건 써봐야 알듯)
• 자동 preload 적용
• built-in Image Optimization 자동 적용 (어떤 source에서 왔던 상관 없이!)
• on-demand image optimizing : user가 요청했을 때 압축하기 때문에 빌드타임이 증가하지 않음
• 가능한 브라우저에 대해서 WebP등 최신 이미지 포맷으로 제공

공식 문서 : Next.js Image Component and Automatic Image Optimization documentation.

2. Internationalized Routing

국제화?를 쉽게 할 수 있다.

• 제공하는 locale 설정
• locale별 domain 설정
• Accept-Language header를 통한 언어 감지 + 자동 리다이렉트
• 감지한 언어를 자동으로 html tag의 lang 속성으로 추가
• 앞으로 더 많은 국제화 관련 기능들을 추가할 것!

공식 문서 : Internationalized Routing documentation

3. Next.js Analytics

웹사이트 로딩이 3초 이상 걸리면 50% 이상의 고객이 떠난다. E커머스에서 로딩 시간을 0.1초 개선할 때마다 전환률이 1% 늘어난다는 통계도 있다.

사용중인데 엄청 좋은지 잘 모르겠다 ㅎ.. 배포를 자주 할수록 효과적일듯.

• 지속적인 측정
• visitor들이 사용하는 실제 기기로 측정

4. Next.js Commerce

Next.js 10에서 새롭게 추가된 기능들이 E커머스를 만들 때 좋다고 한다. Next.js Commerce는 이를 쉽게 시작해볼 수 있는 스타터킷이다.

E커머스 개발을 이제 시작하는 사람이라면 사용하길 강력히 추천한다. Vercel이 준비한 것은 항상 실망시키지 않는다.

5. React 17 Support

어떤 설정을 건드릴 필요도 없이, Next.js와 React를 업그레이드하는 것만으로도 React 17을 사용할 수 있다.

React 17이 사용되면 new JSX transform이 자동으로 활성화된다.

React 17 패치노트와 최근 이슈 목록등을 살펴본 후에 업그레이드 해야겠다.

$ yarn add next@latest react@latest react-dom@latest

6. getStaticProps / getServerSideProps Fast Refresh

이제 getStaticProps / getServerSideProps 을 수정하면 자동으로 다시 실행해 새로운 데이터를 적용한다.

개발할 때 이게 정말정말정말 불편했는데 다행이다!

7. Fast Refresh for MDX

@next/mdx를 사용하면 MDX 수정시 Fast Refresh가 활성화된다.

가이드(@next/mdx)

8. Importing CSS from Third Party React Components

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

이제 컴포넌트 내에서 외부 컴포넌트의 css를 import할 수 있다. 이로 인해 CSS code-splitting을 적용된다!

정말 유용한 기능인듯한데 나는 안 쓴다.

9. Automatic Resolving of href

이제 next/link를 사용할 때 as를 생략해도 된다.

10. @next/codemod CLI

Next.js 버전 업데이트로 인한 코드 변경을 쉽게할 수 있도록 도와주는 CLI다.

React에도 비슷한 것이 있다. Vercel과 Facebook이 얼마나 개발자 UX에 신경 쓰는지 알 수 있는 부분

11. Bloacking Fallback for getStaticPaths

원래는 등록되지 않은 path에 대해서 fallback:false면 404, true면 데이터가 빈 채로 렌더링했다.

새로 추가된 ‘blocking’ 값을 넣으면 등록되지 않은 path에 대해서 일단 block한 상태로 getServerSideProps처럼 데이터를 불러와 새로 HTML을 generate한뒤 반환한다고한다.

사실상 getBlockingProps라는 새로운 데이터 fetching 방식이 생긴 것과 마찬가지다. 여러 방면으로 유용하게 활용할 수 있을듯

12. Redirect and notFound Support for getStaticProps / getServerSideProps

export function getStaticProps() {
  return {
    // returns the default 404 page with a status code of 404
    notFound: true,
  };
  return {
    // returns a redirect to an internal page `/another-page`
    redirect: {
      destination: '/another-page',
      permanent: false,
    },
  };
  return {
    // returns a redirect to an external domain `example.com`
    redirect: {
      destination: 'https://example.com',
      permanent: false,
    },
  };
}

이제 redirect, notFound를 처리하기 위해 복잡한 코드를 쓰지 않아도 된다!

redirect, notFound를 어떻게 처리해야할지 애매하다고 느꼈는데 정말 좋은 패치인 것 같다! 우리 서비스에도 빠르게 적용할 예정