[Next.js] Next.js 장단점과 특징

 

 

Next.js란

리액트 애플리케이션에서 서버사이드렌더링(SSR)을 쉽게 구현할 수 있게 도와주는 프레임워크다.

 

Next.js 왜 쓸까?

공식 홈페이지에서 내세우는 장점은 다음과 같다.

• 직관적인 페이지 기반 라우팅(동적 라우트 지원)
• 사전 렌더링, SSG/SSR 모두 페이지 단위 지원
• 더 빠른 페이지 로딩을 위한 자동 코드 분할
• 최적화된 프리페칭을 갖춘 클라이언트 사이드 라우팅
• 내장 CSS 및 SASS 지원, 모든 CSS-in-JS 라이브러리에 대한 지원
• 빠른 새로고침이 지원되는 개발환경
• 서버리스 Functions를 사용하여 API엔드포인트를 빌드
• 완전 확장 가능

 

Next.js의 특징

라우팅

app 폴더에서 새로운 폴더를 만들어서 url 경로를 지정할 수 있다. 폴더를 중첩해서 하위 경로를 지정할 수 있고, 각 폴더에는 page.js로 페이지를 생성한다. 뿐만 아니라 대괄호([])로 경로를 지정하면 동적 라우팅을 할 수 있다.

 

<Link> 컴포넌트

<Link> 컴포넌트는 클라이언트 사이드 내비게이팅을 가능하게 하고, prop을 받아서 탐색 동작을 더 잘 제어하게 해준다.

<Link> 컴포넌트는 href prop을 받아 클릭시 라우팅된 링크로 연결되게 한다.

 

layout.js

기본 레이아웃을 잡아준다. 현재 및 상위폴더에 있는 모든 layout.js들을 합쳐서 보여준다. 여러 라우팅 경로에 공통적으로 들어가는 ui요소를 이 파일에 넣어주면 모든 페이지에 표시해 준다.{children} 부분이 나머지 page.js에 들어간 부분이다.

 

<Image> 컴포넌트

장점: 레이지로딩, 레이아웃 shift 방지, 자동으로 크기 최적화

단점: 반복문으로 표시하기 까다로움, 외부 사이트 이미지를 링크로 넣을 때 설정이 까다롭다.

 

서버 컴포넌트와 클라이언트 컴포넌트

기본 설정은 서버 컴포넌트, 페이지 상단에 'use client'를 사용하면 클라이언트 컴포넌트를 만들 수 있다.

서버 컴포넌트는 html에 자바스크립트 기능을 넣을 수 없다. useState, useEffect처럼 html을 동적으로 변경하는 기능을 사용할 수 없다.

클라이언트 컴포넌트는 첫 로딩속도가 느리고 hydration, 즉 html을 유저에게 보낸 후에 자바스크립트로 html 다시 읽고 분석하는 과정이 필요하다.

큰 페이지는 서버 컴포넌트로 만들고, 자바스크립트 기능이 필요한 곳에서만 클라이언트 컴포넌트로 만든다.

 

---

참고 자료

 

Next.js란 무엇인가

https://garve32.tistory.com/33

 

애플코딩: Next.js로 웹서비스 만들기

https://codingapple.com/course/next-js/