patterns

Nextjs의 개요

📮 피드백 보내기

Next.js 에 대한 소개

next.js는 vercel에 의해 개발된 하이브리드 react앱을 위한 프레임웍이다. 웹에서 컨텐츠를 로드해 보여주기 위한 다양한 방법을 모두 이해하기란 어려운 일이다. next.js는 이를 추상화하여 쉽게 사용할 수 있게 해 준다. 이 프레임웍은 복잡한 설정 파일 없이도 확장 가능하고 성능 또한 좋은 react코드를 개발할 수 있게 해 준다. 따라서 개발자는 기능을 개발하는데 집중할 수 있다.

아래에서 next.js에 대한 기능들과 관련된 내용들을 살펴보자

기본 기능

Pre-rendering

기본적으로 next.js는 클라이언트 측 페이지와 별개로 각 페이지의 HTML 코드들을 미리 생성해 둔다. 이 과정을 Pre-rendering이라 한다. next.js는 페이지를 인터렉티브하게 만드는 javascript코드들이 생성된 HTML과 연결되도록 해 준다. 이 javascript코드들은 페이지가 로드될 때 실행되며 이 때. react는 위에서 렌더링된 컨텐츠들 별도로 수정하지 않고 react앱의 렌더링 결과와 일치하는지 확인하는데. 이를 hydration과정이라 한다.

각 페이지는 page 디렉토리 내에 생성된 .js, .jsx, .ts, .tsx 파일이 react 컴포넌트로 부터 생성된다. 라우팅 경로는 파일의 이름을 기준으로 결정된다. 예를 들어 pages/about.js 는 /about 과 대응된다. next.js는 서버 사이드 렌더링 혹은 정적 페이지 생성을 통한 pre-rendering을 지원한다. 하나의 앱 내에서 페이지 별로 서버사이드 렌더링 혹은 정적 페이지 생성을 선택적으로도 사용할 수 있다. 특정 경로에 한해서는 클라이언트 사이드 렌더링도 적용할 수 있다.

데이터 불러오기

next.js는 서버사이드 렌더링, 정적 페이지 생성 양쪽에서 모두 데이터를 불러올 수 있다. 아래 함수들을 이용하여 next.js 내에서 데이터를 불러올 수 있다.

  1. getStaticProps - 데이터 렌더를 위해 정적 사이트 생성과 함께 사용한다.
  2. getStaticPaths - 동적 라우팅 처리를 위해 정적 사이트 생성과 함께 사용한다.
  3. getServerSideProps - 서버사이드 렌더링에서 사용한다.

정적 컨텐츠 서빙하기

이미지와 같은 정적 컨텐츠들은 루트 경로의 public 폴더에 놓으면 된다. 컨텐츠 사용을 위해서는 src=/logo.png 와 같이 절대 경로를 사용하면 된다.

이미지 자동 최적화

next.js는 이미지 자동 최적화 기능이 구현되어 사이즈를 변경하거나 퀄리티를 수정하는 등 브라우저들이 지원하는 최신 포멧의 이미지를 제공할 수 있다. 따라서 큰 이미지라도 작은 뷰포트에서는 작게 리사이즈되어 서빙된다. 이미지 최적화 기능은 next.js 에서 Image컴포넌트를 import하여 <img> 엘리먼트를 사용하듯이 쓸 수 있다.

import Image from 'next/image'

아래와 같이 컴포넌트를 사용하여 이미지를 서빙할 수 있다.

<Image src="/logo.png" alt="Logo" width={500} height={500} />

라우팅

next.js는 pages 디렉토리를 통한 라우팅을 지원한다. 서브디렉토리를 포함하여 해당 폴더 내의 모든 js파일들을 경로에 대응하는 라우팅 경로로 사용된다. next.js는 동적으로 라우팅 경로를 만드는 것 또한 지원하며 이 경우 파라미터의 값으로 보여질 문서를 결정하게 된다.

예를 들어 pages/products/[pid].js 같은 경로들은 pages/products/1 에 대응되며 이런 동적 페이지로 링크를 거는것도 가능하다.

코드 스플리팅

코드 스플리팅 기능을 적용하면 클라이언트 측 성능 확보를 위해 꼭 필요한 javascript만 보낼 수 있다. next.js는 두 가지의 코드 스플리팅 기능을 지원한다.

  1. 라우팅 경로 기반: next.js에 기본으로 적용되어 있으며. 사용자가 라우팅할 때 최초로 필요로 하는 코드들만 전송한다. 나머지 코드들은 앱 내에서 페이지 이동을 할 때 추가적으로 전송한다. 이는 파싱하고 컴파일 해야 하는 코드량을 줄여 페이지 로드 타임을 감소시킬 수 있다.
  2. 컴포넌트별: 이 코드 스플리팅은 큰 컴포넌트를 여러 코드들로 나누어 필요할 때 다운로드받을 수 있도록 해 준다. next.js는 dynamic import() 를 통해 컴포넌트 코드 스플리팅을 지원한다. 따라서 react컴포넌트 포함 필요한 javascript코드들을 분리하여 동적으로 로드할 수 있게 된다.

next.js시작하기

next.js는 리눅스, 윈도우, macos의 nodejs 10.13 버전 이상에서 설치할 수 있다. 자동으로 환경을 구성하거나 수동으로 구성하는것 모두 가능하다.

create-next-app 을 사용하여 자동 환경 구성하기

npx create-next-app
# or
yarn create next-app

설치가 끝난 후 개발 서버를 실행하면 http://localhost:3000 에 접속하여 페이지를 볼 수 있다.

next.js에 대해서 알아보았으니 이제 이를 이용한 다양한 패턴에 대해서 살펴보자