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 컬렉션에서는 Create React App(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 앱의 디렉터리 구조를 보여줍니다.

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

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

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

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

Network 패널의 Preview 탭에는 페이지가 요청될 때 Next.js가 시각적으로 완전한 HTML을 반환하는 것으로 표시됩니다.
Network 패널의 Preview 탭에는 페이지가 요청될 때 Next.js가 시각적으로 완전한 HTML을 반환하는 것으로 표시됩니다.

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

다음 단계

의도한 말장난입니다. 😛

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