Next.js를 사용한 기본 성능

Next.js가 React 앱의 다양한 최적화를 처리하므로 개발자는

후세인 지르데

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

이 소개에서는 프레임워크가 제공하는 많은 기능을 개략적으로 간략하게 다룹니다. 이 컬렉션의 다른 가이드에서는 기능을 자세히 살펴봅니다.

학습 내용

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

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

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

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

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

CRA에 몇 가지 기본 최적화가 기본 제공되지만 이 도구는 단순하고 직관적인 설정을 제공하는 것을 목표로 합니다. 개발자는 구성을 직접 제거하고 수정할지 여부를 결정하도록 선택권이 주어집니다.

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

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

설정

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

npx create-next-app new-app

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

cd new-app
npm run dev

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

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

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

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

또한 Next.js의 모든 초기 페이지 로드는 서버 측에서 렌더링됩니다. DevTools에서 네트워크 패널을 열면 문서에 관한 초기 요청이 완전히 서버에서 렌더링된 페이지가 반환되는 것을 확인할 수 있습니다.

Network 패널의 Preview 탭에는 페이지가 요청될 때 Next.js가 시각적으로 완전한 HTML을 반환하는 것을 볼 수 있습니다.
네트워크 패널의 미리보기 탭에는 페이지가 요청될 때 Next.js가 시각적으로 완전한 HTML을 반환하는 것으로 표시됩니다.

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

다음 단계

의도된 말장난이라서요 🙂

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