Next.JS 알아보기

프론트엔드/Next.JS

Next.JS 알아보기

학습하는 청년 2023. 7. 1. 22:20

최종 수정 : 2024-06-21

Next.js

'리액트를 위해 만든' 오픈소스 자바스크립트 웹 프레임워크로, SSR, SSG, ISR과 같은 다양하고 풍부한 기능을 제공한다. 수많은 내장 컴포넌트와 플러그인이 있다.

Q. 왜 등장했는가?

리액트가 기본적으로 클라이언트 사이드(CSR)에서만 작동하기 때문에 검색 엔진 최적화(SEO, search engine optimization)의 효과를 거의 볼 수 없었다. 첫 화면에 웹 애플리케이션을 제대로 표시하기 위해 실행 초기에 성능 부담이 생기는 문제가 있다. 웹 앱을 완전히 표시하려면 브라우저가 전체 웹 애플리케이션 번들을 다운로드한 다음 그 내용을 분석하고 코드를 실행해서 결과를 얻어야 하기 때문이다.

이런 문제를 해결하기 위해 서버에서 미리 렌더링(Pre-rendering)해두는 방법을 연구하기 시작했다. 서버 사이드 렌더링(SSR)을 사용할 수 있다면 HTML 페이지로 미리 렌더링해둔 다음 브라우저가 이를 다운로드하여 즉각적으로 화면에 표시할 수 있다. 그 다음 클라이언트에서 자바스크립트 번들을 다 받으면 사용자가 웹 앱과 상호 작용할 수 있다. 이러한 연구의 결과로 Vercel이 Next.js를 만들었다.

Next.js의 원칙

out-out-the-box functionality requiring no setup
JavaScript everywhere
automatic code-splitting and server-rendering
configurable data-fetching
anticipating requests
simplifying deployment

Next.js의 기능

- 정적 사이트 생성(SSG)

- 증분 정적 콘텐츠 생성(ISR)

- 타입스크립트 지원

- 자동 폴리필(polyfill) 적용

- 이미지 최적화

- 웹 애플리케이션의 국제화 지원

- 성능 분석

장점
- 활동적인 커뮤니티
- 검색엔진 최적화가 된다.

클라이언트와 서버에서 실행할 수 있는 코드에 풍부하고 다양한 기능을 제공한다. 서버 사이드 렌더링 페이지나 정적으로 생성된 페이지 모두 Node.js에서 실행되기 때문에 fetch, window, document와 같이 웹 브라우저에서 제공하는 전역 객체나 canvas 같은 HTML 요소에는 접근할 수 없다. fs, child_process와 같이 Node.js에서만 사용할 수 있는 라이브러리나 API를 사용하는 경우, 각 요청별 데이터를 클라이언트로 보내기 전에 서버 사이드 코드를 실행하거나 페이지 생성 시점에 해당 코드를 처리하는 방식을 지원한다. 어떤 방식으로 지원하는지는 각 페이지가 어떤 렌더링 방식을 사용하느냐에 따라 결정된다.

# TypeScript 지원

Next.js는 타입스크립트로 작성된 프레임워크라서 태생적으로 타입 정의(type definition)을 지원한다. 프로젝트의 최상위 디렉터리 안에 tsconfig.json이라는 타입스크립트 설정 파일만 만들면 된다. 그 다음에 npm run dev 명령을 실행하면 다음과 같은 메시지가 나온다.

It looks like you're trying to use TypeScript 
but do not have the required package(s) installed.

Please install typescript, @types/react, and @types/node by running:

  npm install --save-dev typescript @types/react @types/node
  
If you are not trying to use TypeScript, 
please remove the tsconfig.json file from your package root 
(and any TypeScipr files in your pages directory).

# provide every rendering pattern you need

- Next.js가 빛을 발하는 이유는 원하는 다양한 종류 렌더링 패턴을 제공한다는 데 있다. 더욱이 같은 웹 사이트일지라도, 어떤 페이지는 SSG를, 어떤 페이지는 SSR을, 어떤 페이지에서는 CSR을 상황에 맞게 사용할 수 있다는 점이 Next.js의 가장 큰 장점이다. 그래서 Next.js를 이용하여 렌더링 패턴을 알맞게 화용하여, 서버비용이나 빌드타임을 줄이거나, 콘텐츠를 캐싱하는 등 optimized된 환경을 유저에게 제공할 수 있다.

React와 Next.js 비교

기본 철학은 거의 같다. '설정보다 관습(convention-over-configuration)'이라는 취지로 만들어졌기 때문에 복잡한 설정 없이도 해당 기능을 사용할 수 있다. 또한, 실제 애플리케이션 개발 과정에서 설정을 바꿀 일은 그렇게 많지 않다. 그보다는 '적절한 코드 컨벤션'을 따라 개발할 일이 더 많다.

차이점은 무엇인가?

가장 큰 차이점은 리액트는 자바스크립트 라이브러리이고 Next.js는 프레임워크라는 점이다.

# 라이브러리와 프레임워크

개발 주도권이 누구에게 있는가에 따라 라이브러리와 프레임워크로 구분할 수 있다.
개발자에게 주도권이 있으면 라이브러리, 주도권이 기능에 있다면 프레임워크

??? : "형 개발 못 하잖아... 형은 뒤로 빠져 있어."

Cf. Next.js와 비슷한 프레임 워크

SSR을 지원하는 프레임워크가 Next.js 하나뿐인 것은 아니다.

# Gatsby

Next.js 대신 사용할 수 있는 유명한 프레임워크

정적 사이트 생성만 지원하기 때문에, 특히 정적 웹 사이트를 만들 수 있는 프레임워크를 찾는다면 최고의 선택이다.

가장 큰 단점은 동적 서버 사이드 렌더링을 지원하지 않는다. 따라서 데이터에 따라 동적으로 변하는 복잡한 웹 사이트는 만들 수 없다.

# Pazzle

서버 사이드 렌더링이 가능한 자바스크립트 애플리케이션을 만들 수 있다.

핵심은 create-react-app 도구를 쉽게 사용하면서도 서버와 클라이언트의 복잡한 애플리케이션 설정들을 추상화하고 단순하게 만들 수 있다는 점이다. 이로 인해, 사용할 프레임워크에 관한 지식이 없어도 된다는 가장 큰 장점이 된다.

# Nuxt.js

뷰를 사용하는 입장에서 Nuxt.js는 리액트의 Next.js에 해당한다. 별다른 차이가 없다. 같은 목표를 갖는 프레임워크지만 Nuxt.js는 좀 더 많은 설정을 필요로 한다. 레이아웃, 전역 플러그인과 컴포넌트, 라우트 등을 지정할 수 있다.

참고 자료

실전에서 바로 쓰는 Next.js (p.18-32)

저작자표시 비영리 변경금지