[내보내번] Next.js docs - Supported Browsers and Features

내보내번(내가 보려고 내가 번역한...) Next.js docs

2021년 4월 4일 기준 Next.js 공식 문서를 번역했다.

※ 영어 전공자도 해외 유학파도 아니기에 번역에는 의역, 오역, 구글 번역이 무수히 많을 수 있으며, 혼자 공식문서를 참조해가며 번역하다 보니 오타도 많을 수 있다. 정확한 내용은 공식문서를 직접 살펴보거나 다른 정보들을 더 찾아보는 것을 추천한다.

(하지만 댓글 피드백도 환영합니다😃 )

Next.js 공식문서 확인하기>>

Basic Features: Supported Browsers and Features | Next.js

---

Next.js supports IE11 and all modern browsers (Edge, Firefox, Chrome, Safari, Opera, et al) with no required configuration.
Next.js는 인터넷 익스플로러 11과 모든 모던 브라우저들(엣지, 파이어폭스, 크롬, 사파리 등)을 추가 설정 없이 지원한다. 

Polyfills

We transparently inject polyfills required for IE11 compatibility. In addition, we also inject widely used polyfills, including:
IE11 호환성을 위한 폴리필을 transparently 추가한다. 그에 더해 아래의 항목들을 포함하는 널리 사용되는 폴리필 역시 추가한다. 

• fetch() — Replacing: whatwg-fetch and unfetch.
  대체: whatwg-fetch와 unfetch
• URL — Replacing: the url package (Node.js API).
  대체: url 패키지(Node.js API)
• Object.assign() — Replacing: object-assign, object.assign, and core-js/object/assign.
  대체: object-assign, object.assign, core-js/object/assign

If any of your dependencies includes these polyfills, they’ll be eliminated automatically from the production build to avoid duplication.
직접 추가한 종속성 중에 이 폴리필을 포함하고 있다면, 그 종속성들은 중복을 피하기 위해서 운영 빌드 환경에서 자동으로 제거될 것이다.

In addition, to reduce bundle size, Next.js will only load these polyfills for browsers that require them. The majority of the web traffic globally will not download these polyfills.
그리고 번들 크기를 줄이기 위해서, Next.js는 폴리필이 필요한 브라우저에만 로드할 것이다. 전반적으로 대부분의 웹 트래픽은 이러한 폴리필들을 다운로드하지 않는다. 

Server-Side Polyfills

In addition to fetch() on the client side, Next.js polyfills fetch() in the Node.js environment. You can use fetch() on your server code (such as getStaticProps) without using polyfills such as isomorphic-unfetch or node-fetch.
클라이언트 측에서의 fetch() 외에도, Next.js는 Node.js 환경에서 fetch()를 폴리필한다. isomorphic-unfetch나 node-fetch와 같은 폴리필을 사용하지 않고도 서버 코드(getStaticProps와 같은)에서 fetch()를 사용할 수 있다. 

Custom Polyfills

If your own code or any external npm dependencies require features not supported by your target browsers, you need to add polyfills yourself.
자체 코드나 다른 외부 npm 종속성에서 대상 브라우저에서 지원하지 않는 기능을 필요로 한다면, 스스로 폴리필을 추가할 필요가 있다. 

In this case, you should add a top-level import for the specific polyfill you need in your Custom <App> or the individual component.
이 경우 커스텀 <App> 또는 개별 컴포넌트에서 필요한 특정 폴리필을 위해 최상위 가져오기로 추가해야한다.

JavaScript Language Features

Next.js allows you to use the latest JavaScript features out of the box. In addition to ES6 features, Next.js also supports:
Next.js를 사용하면 최신 JavaScript 기능을 즉시 사용할 수 있다. ES6 기능들 외에도, Next.js는 아래의 기능들도 지원한다:

• Async/await (ES2017)
• Object Rest/Spread Properties (ES2018)
• Dynamic import() (ES2020)
• Optional Chaining (ES2020)
• Nullish Coalescing (ES2020)
• Class Fields and Static Properties (part of stage 3 proposal)
• and more!

TypeScript Features

Next.js has built-in TypeScript support. Learn more here.
Next.js는 기본적으로 TypeScript를 지원한다. 

Customizing Babel Config (Advanced)

You can customize babel configuration. Learn more here.
babel 구성을 사용자가 구성할 수 있다.