| <colcolor=#fff> Next.js | |
|
|
|
| 종류 | <colbgcolor=#fff,#000> 프레임워크 |
| 라이선스 | MIT 라이선스 |
| 개발 | Vercel |
| 언어 | JavaScript |
| 지원 문법 | JSX |
| 렌더링 방식 | SSR / SSG |
| 버전 | v14.1.0 |
| 링크 |
|
[clearfix]
1. 개요
Vercel이 개발한 오픈 소스 react 프레임워크.2. 상세
기본적으로 SSR 위주의 풀스택 기반 프레임워크를 주력으로 성장하고 있으며, 풀스택 프레임워크답게 API 기능 및 서버 컴포넌트를 통한 서버측 기능과, React 컴포넌트를 통한 클라이언트 기능으로 나뉘어 통합 제공하는 프레임워크이다. 현재 node.js 기반의 안정적인 풀스택 프레임워크로 사랑받고 있으며, SSG 방식 또한 제공한다. react 공식 시작하기 문서를 열람할 시, 가장 먼저 이 Next.js 프레임워크를 통한 시작하기가 가장 상단에 표시될 정도로 React의 거의 대표급 프레임워크이다.파일 페이지 라우터(기존)과 13부터 안정화된 폴더 방식의 앱 라우터(아래 참조) 두가지 라우팅 방식을 지원하며, 라우팅 규칙이 충돌하지 않는 내에서 두 라우팅 방식을 모두 사용할 수 있다. 또한, 앱 라우터가 완전히 안정화한다 해도, 기존 페이지 라우팅 방식은 지속적으로 관리하기 때문에 차기 개발 시에도 취향이나 정책에 맞게 적절히 사용하면 된다.
2.1. 앱 라우터
App router.
Next.js 12 버전에서 알파, 베타 테스트를 시작하면서 13.4에서 안정화된 기능으로, 간단히 요약하면, 기존의 파일 기반의 라우팅에서 폴더 기반 라우팅으로 바뀌면서, 여기에 폴더 하위에 여러 기능을 조합하여 사용할 수 있는 강력한 앱 라우팅 기능을 제공한다. 물론 기존 파일 기반의 라우팅을 사용할 수도 있으나, 폴더 기반의 앱 라우팅 기능을 사용하기 위해 폴더 기반의 경로에 아래와 같이 각각의 역할이 담긴 파일명과
js, ts, jsx, tsx 확장자를 작성하면 된다.-
레이아웃(
layout.js): 상위에서 중첩이 가능한 페이지 틀을 담당하는 상위 컴포넌트 -
페이지(
page.js): 주 페이지 내용을 표시하는 컴포넌트 (기존 파일 기반 컴포넌트 역할 계승) -
오류(
error.js): 페이지에서 오류가 발생할 경우 표시되는 컴포넌트 -
불러오기(
loading.js):<Suspense />컴포넌트의fallback속성과 동일한 원리로 페이지를 불러오기 전 표시할 컴포넌트 -
없는 페이지(
not-found.js): 하위 페이지 탐색 시 없을 경우 표시할 페이지 컴포넌트 -
템플릿(
template.js): 기본적으로 Next.js 에서 페이지 이동 시 상태가 유지되는데, 이 기능을 쓰면 해당 페이지 및 하위 페이지 이동 시 상태를 다시 관리하는 상태가 된다. 주로 CSS 애니메이션을 종료하거나, 회수해야 할 라이브러리가 존재하는 등 목적에 적합하며, 공식적으로 고급 기능으로 취급한다. 사용 방법은 간단한데, 빈 레이아웃처럼 컴포넌트를 작성하면 된다. -
기본 라우팅(
default.js): 병렬 라우팅[1] 경로에 직접 접속했을 경우 기본적으로 렌더링할 내용을 작성한다.
현재 Next.js 외에 폴더 기반 라우팅을 채택한 풀스택 프레임워크는 Next.js 보다 더 빨리, 베타 도중 갑작스레 도입하여 정식 출시한 SvelteKit가 있다.
2.2. 서버 컴포넌트
Server components
react 공식 팀과 협력하고 있는 서버 컴포넌트는 말 그대로 컴포넌트를 서버에서 관리하여 서버가 가지는 기능(DB 및 파일, 보안 등)에 대해 React가 가지는 기능과 결합하여 서비스를 제공하는 매우 강력한 기능으로, 아직 RFC 단계인 이 서버 컴포넌트의 구현체를 Next.js 에서 앞서 제공하고 있다. 이 기술이 React에 정식 출시되면 Remix 등의 다른 React 기반 프레임워크에서도 사용이 가능하다.
2.3. 서버 액션
Forms and Mutations앱 라우터와 함께 실험적 기능이었다가 14.0.0부터 정식 출시한 기능. 이 기능 또한 서버 컴포넌트와 같이 React에서 공식적으로 제공할 예정인 기능이다.
서버 컴포넌트가 서버로부터 정보를 가져오기 위해 태어났다면, 서버 액션은 반대로 정보를 보내기 위해 태어난 Next.js의 기능.
submit 이벤트 대신 함수를 선언하고, 함수 본문에
'use server' 지시자를 추가하여 서버 함수로 동작함으로써 데이터를 서버 내에서 처리할 수 있도록 하는 기능이다.이 기능 또한 SvelteKit가 먼저 선보여 안정적인 기능으로 호평받는 중에 있다.
2.4. 예시
2.4.1. 프로젝트 시작
#!syntax sh
npx create-next-app@latest3. 특징
- Zero Config: 서비스를 구축하는 데 필요한 최소한의 설정만을 요구하며 컴파일링, 번들링 등 코드가 실제로 만들어지는 과정은 내부적으로 처리한다.
-
속도:
Vercel의 목표 중 하나가 'Fast Web'이라는 데서도 알 수 있듯이, 기본적으로 속도를 중시한다.
SSR구조 자체로 인한 렌더링 성능과는 별개로 SWC등의 컴파일러를 차용하여 꾸준히 빌드 속도를 올리고 있다. - (S)CSS 및 TypeScript 내장 지원
3.1. 장점
-
정적인 구축
정적으로 빠르게 구축할 수 있다. -
서버 사이드 렌더링 (SSR)
클라이언트에 주는 부담을 줄인다.
3.2. 단점
-
속도
SSR의 단점으로 서버가 느리면 웹사이트가 기하급수적으로 느려진다. -
너무 엄격한 캐시 정책
Next.js 13 버전부터 사용자들의 원성을 사고 있는 너무 엄격한 캐시 정책 때문에 앱 라우터 사용을 꺼리는 경우가 많다. 기본적으로 캐시는 앱 최적화의 필수 요소이긴 하지만, 사용자가 원하는 조건에 캐시를 갱신하거나, 아예 캐시가 없어야 하는 시나리오임에도 캐시 정책이 원치 않게 작동하여, 컨텐츠 전달 시 어려움으로, 이로 인한 이슈가 지속적으로 제기되고 있으나, 활발한 커뮤니티 참여를 통해 14.1 부터 고질적인 자체 호스팅 내 유연하지 못한 캐시 문제를 개선하여 직접 캐시 관리를 꾀할 수 있는 설정을 제공함으로써 Redis 같은 DB등을 통한 공유 캐시를 사용할 길이 열렸다. -
~
불친절한 오류 안내~
Next.js 개발 시 오류가 발생했을 때, 내부적인 Stack Trace만 제공하여 다른 SSR 프레임워크 개발 환경 대비 불편한 오류 대응이 드디어 14.1 에 친절하게 오류 위치를 알려주는 방식으로 개선되었다.
4. Next.js를 사용하는 기업이나 서비스
- Vercel
- 틱톡
- Twitch
- Hulu
- 나이키
- TypeForm
- 닌텐도
- TED
- Styled-components
- 엘라스틱 서치
- repl.it
- Avocode
- solved.ac
- Wolfram Alpha
5. 관련 문서
- Vercel
- React(라이브러리)
- webpack - 현재 Next.js 의 번들러는 webpack 단독으로 채택 중인데, Webpack 팀이 Vercel에 합류하면서 개발 중인 Turbopack 번들러로 적극적인 전환 중. 현재 베타 단계로 이용 가능하다.