[Next.js] 핵심 개념 익히기 - ⑥ 지원하는 브라우저 및 기능

Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다.

 

Next.js는 IE11을 포함한 모든 현대 브라우저들(Edge, Firefox, Chrome, Safari, Opera 등)을 지원한다.

 

1. Polyfills

Next.js는 IE11 호환을 위해 필요한 Polyfill들을 자동으로 삽입한다. 또한 fetch() 함수, URL 클래스, Object.assign() 함수 등의 기능들을 사용하기 위한 널리 알려진 Polyfill들도 자동으로 삽입한다.

만약 이러한 Polyfill들을 포함하는 의존성이 프로젝트에 존재한다면, 그것들은 중복 방지를 위해 자동으로 번들에서 제외된다. 또한, 번들의 크기를 줄이기 위해 Next.js는 해당 브라우저에서 필요로 하는 Polyfill들만 로드한다.

 

2. 서버 사이드 Polyfills

Next.js는 브라우저에서 fetch() 함수를 사용할 수 있도록 할 뿐 아니라, Node.js 환경에서도 fetch() 함수를 사용할 수 있도록 하는 Polyfill도 삽입한다. 따라서 별도의 Polyfill을 사용하지 않고도 서버 사이드의 getStaticProps() 함수나 getServerSideProps() 함수에서도 fetch() 함수를 사용할 수 있다.

 

3. 커스텀 Polyfills

나의 코드 혹은 어떠한 외부 의존성이 브라우저에서 지원하지 않는 특정 기능을 필요로 한다면, 직접 해당 기능을 지원하기 위한 Polyfill을 커스텀 <App> 또는 개별 컴포넌트가 존재하는 파일의 최상위에서 import 해야 한다.

 

4. JavaScript 최신 기능 지원

Next.js는 별도의 설정 없이도 대부분의 최신 JavaScript 기능들을 지원한다. ES6의 기능들과 함께, 다음과 같은 기능들도 지원한다.

• 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)

 

5. TypeScript 지원

Next.js는 자체적으로 TypeScript를 지원한다. 자세한 내용은 여기를 참조하자.

 

6. Babel 설정 커스터마이징

Next.js에서는 Babel 설정을 커스터마이징할 수 있다. 자세한 내용은 여기를 참조하자.