Next.js를 사용한 기본 성능

Next.js가 React 앱에서 많은 최적화를 처리하므로 개발자가 직접

Houssein Djirdeh

Next.js는 여러 성능 최적화가 내장된 독자적인 React 프레임워크입니다. 이 프레임워크의 기본 아이디어는 이러한 기능을 기본적으로 포함하여 애플리케이션이 시작되고 최대한 높은 성능을 유지하도록 하는 것입니다.

이 소개에서는 프레임워크에서 제공하는 여러 기능을 개략적으로 설명합니다. 이 컬렉션의 다른 가이드에서는 이러한 기능을 더 자세히 살펴봅니다.

학습 내용

Next.js는 기본적으로 여러 성능 최적화를 제공하지만 이 가이드에서는 이러한 최적화에 대해 자세히 설명하고 빠르고 성능이 우수한 환경을 빌드하는 방법을 보여주는 것을 목표로 합니다.

일반적으로 React 사이트에 추가할 수 있는 최적화는 많이 있으며, Next.js로 빌드된 애플리케이션에서도 작동하는 최적화가 많습니다. Next.js가 제공하는 기능에 중점을 두므로 이 내용은 다루지 않습니다. 일반적인 React 최적화에 관한 자세한 내용은 React 컬렉션을 참고하세요.

Next.js는 React와 어떻게 다른가요?

React는 구성요소 기반 접근 방식을 사용하여 사용자 인터페이스를 더 쉽게 빌드할 수 있게 해주는 라이브러리입니다. React는 강력하기는 하지만 특별히 UI 라이브러리입니다. 많은 개발자가 전체 빌드 도구 모음을 구현하기 위해 모듈 번들러 (예: webpack) 및 트랜스파일러 (예: Babel)와 같은 추가 도구를 포함합니다.

React 컬렉션에서는 React 앱 만들기(CRA)를 사용하여 React 앱을 빠르게 가동하는 접근 방식을 취했습니다. CRA는 단일 명령어로 완전한 빌드 도구 모음을 제공하므로 React 애플리케이션 설정의 번거로움을 덜어줍니다.

CRA에 기본 제공되는 몇 가지 기본 최적화가 있지만 이 도구는 간단하고 간단한 설정을 제공하는 것을 목표로 합니다. 개발자는 구성 자체를 제거하고 수정할지 결정할 수 있습니다.

새 React 애플리케이션을 만드는 데도 사용할 수 있는 Next.js는 다른 접근 방식을 취합니다. 이 API는 많은 개발자가 설정하기를 원하지만 설정하기 어려운 여러 일반적인 최적화 기능을 즉시 제공합니다. 예를 들면 다음과 같습니다.

  • 서버 측 렌더링
  • 자동 코드 분할
  • 경로 미리 가져오기
  • 파일 시스템 라우팅
  • CSS-in-JS 스타일 지정 (styled-jsx)

설정

새 Next.js 애플리케이션을 만들려면 다음 명령어를 실행합니다.

npx create-next-app new-app

그런 다음 디렉터리로 이동하여 개발 서버를 시작합니다.

cd new-app
npm run dev

다음 삽입은 새 Next.js 앱의 디렉터리 구조를 보여줍니다.

  • 수정할 리믹스를 클릭하여 프로젝트를 수정할 수 있도록 합니다.
  • 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면 전체 화면을 누릅니다.

pages/ 디렉터리는 단일 파일 index.jsx로 생성됩니다. Next.js는 이 디렉터리 내의 모든 페이지가 별도의 경로로 제공되는 파일 시스템 라우팅 접근 방식을 따릅니다. 이 디렉터리에 새 파일(예: about.js)을 만들면 자동으로 새 경로(/about)가 생성됩니다.

구성요소는 다른 React 애플리케이션과 마찬가지로 만들어 사용할 수도 있습니다. components/ 디렉터리는 이미 index.js에 가져온 단일 구성요소 nav.js로 생성되었습니다. 기본적으로 Next.js에서 사용되는 모든 가져오기는 페이지가 로드될 때만 가져오므로 자동화된 코드 분할의 이점을 활용할 수 있습니다.

또한 Next.js의 모든 초기 페이지 로드는 서버 측에서 렌더링됩니다. DevTools에서 Network 패널을 열면 문서의 초기 요청이 서버에서 렌더링된 페이지를 반환하는 것을 확인할 수 있습니다.

Network 패널의 'Preview' 탭에 페이지가 요청될 때 Next.js가 시각적으로 완전한 HTML을 반환함을 보여줍니다.
네트워크 패널의 미리보기 탭에 페이지가 요청될 때 Next.js가 시각적으로 완전한 HTML을 반환함을 보여줍니다.

이는 Next.js에서 자동으로 제공하는 많은 기능 중 일부에 불과합니다. 대부분 맞춤설정할 수 있으며 다양한 사용 사례에 맞게 수정할 수 있습니다.

다음 단계

말장난이 목적인 것 같아요 💻

이 컬렉션의 다른 모든 가이드에서는 구체적인 Next.js 기능을 자세히 살펴봅니다.