Next.js

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

2023. 5. 5. 13:42
목차
  1. Next.js란
  2. Next.js 왜 쓸까?
  3. Next.js의 특징
  4. 라우팅
  5. <Link> 컴포넌트
  6. layout.js
  7. <Image> 컴포넌트
  8. 서버 컴포넌트와 클라이언트 컴포넌트

 

 

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/

'Next.js' 카테고리의 다른 글

[Next.js] CRUD 기능 구현하기  (0) 2023.05.22
[Next.js] 라우팅 이론과 실습  (2) 2023.05.08
  1. Next.js란
  2. Next.js 왜 쓸까?
  3. Next.js의 특징
  4. 라우팅
  5. <Link> 컴포넌트
  6. layout.js
  7. <Image> 컴포넌트
  8. 서버 컴포넌트와 클라이언트 컴포넌트
'Next.js' 카테고리의 다른 글
  • [Next.js] CRUD 기능 구현하기
  • [Next.js] 라우팅 이론과 실습
JeanneLee57
JeanneLee57
공부하고 기록을 남기는 개발자 Jeanne
JeanneLee57
코딩은 진리
JeanneLee57
전체
오늘
어제
  • 분류 전체보기 (117)
    • Javascript (15)
    • React (15)
    • Next.js (8)
      • Next.js 베타 문서 번역 (5)
    • 프로젝트 (34)
      • 미니 프로젝트 & 과제 (25)
      • SEB 44 pre-project (1)
      • SEB 44 main-project (8)
    • 알고리즘 (12)
    • 부트캠프 준비 (6)
    • 기술면접 (3)
    • CS (7)
    • 코드스테이츠 프론트엔드 부트캠프 (12)

블로그 메뉴

  • 홈
  • 태그

공지사항

인기 글

태그

  • JavaScript
  • RTK
  • useEffect
  • 프론트엔드
  • Next.js
  • CSS
  • codestates
  • 번역
  • react
  • 유데미
  • HTML
  • 코드스테이츠
  • 회고
  • 프리코드캠프
  • 프로그래머스
  • 구조분해할당
  • 고차함수
  • 알고리즘
  • 부트캠프준비
  • 부트캠프

최근 댓글

최근 글

hELLO · Designed By 정상우.
JeanneLee57
[Next.js] Next.js 장단점과 특징
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.