| <colcolor=#000,#fff> Next.js | |
| | |
| 종류 | React 프레임워크 |
| 라이선스 | MIT 라이선스 |
| 개발 | Vercel |
| 언어 | JavaScript |
| 지원 문법 | JSX |
| 렌더링 방식 | SSR / SSG |
| 버전 | v15.0.3 |
| | |
[clearfix]
1. 개요
Vercel이 개발한 오픈 소스 React 프레임워크.
2. 상세
기본적으로 SSR 위주의 풀스택 웹 프레임워크를 주력으로 성장하고 있으며, 풀스택 프레임워크답게 API 기능 및 서버 컴포넌트를 통한 서버측 기능과, React 컴포넌트를 통한 클라이언트 기능으로 나뉘어 통합 제공하는 프레임워크이다. 현재 node.js 기반의 안정적인 풀스택 프레임워크로 사랑받고 있으며, SSG 방식 또한 제공한다. React 공식 시작하기 문서를 열람할 시, 가장 먼저 이 Next.js 프레임워크를 통한 시작하기가 최상단에 표시될 정도로 React의 거의 대표급 프레임워크이다.파일 페이지 라우터(기존)과 13부터 안정화된 폴더 방식의 앱 라우터(아래 참조) 두가지 라우팅 방식을 지원하며, 라우팅 규칙이 충돌하지 않는 내에서 두 라우팅 방식을 모두 사용할 수 있다. 또한, 앱 라우터가 완전히 안정화한다 해도, 기존 페이지 라우팅 방식은 지속적으로 관리하기 때문에 차기 개발 시에도 취향이나 정책에 맞게 적절히 사용하면 된다.
한국시각으로 2024년 10월 22일, 15.0.0 버전이 발표되었다. 라우팅 캐시가 기본적으로 비활성화되며, 곧 나오게 될 React 19 대응, 아직 실험적 단계지만 라우팅 후 후처리 기능을 제공할
after 기능, 그리고 웹 어플리케이션 전역 오류 관리가 가능한 instrumentation.js 기능에 셀프 호스팅 기능 향상등의 전반적인 향상 기능이 제공된다.라우팅 방식에 따라 버전 요구사항이 다르다.
- 앱 라우터의 경우 기술 특성 상 React 19 이상이 요구된다. 현재 React 19 RC 사용 가능하며, 정식 버전 출시 시 대응 예정이다.
- 페이지 라우터의 경우 React 18 호환성을 제공하여, React 18을 가리킨 상태에서 지속적 개발이 가능하다.
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' 지시자를 추가하여 서버 함수로 동작함으로써 데이터를 서버 내에서 처리할 수 있도록 하는 기능이다.다른 UI 프론트엔드의 경우, SvelteKit가 프레임워크 차원에서 제공하고 있고, 같은 기술의 Remix 프레임워크에서는 자체적인 서버 액션 방식을 지원하고 있다.
2.4. 예시
2.4.1. 프로젝트 시작
npx create-next-app@latest
3. 특징
- Zero Config: 서비스를 구축하는 데 필요한 최소한의 설정만을 요구하며 컴파일링, 번들링 등 코드가 실제로 만들어지는 과정은 내부적으로 처리한다.
- 속도: Vercel의 목표 중 하나가 'Fast Web'이라는 데서도 알 수 있듯이, 기본적으로 속도를 중시한다.
SSR구조 자체로 인한 렌더링 성능과는 별개로 SWC등의 컴파일러를 차용하여 꾸준히 빌드 속도를 올리고 있다. - (S)CSS 및 TypeScript 내장 지원
3.1. 장점
- 정적인 구축
정적으로 빠르게 구축할 수 있다. - 서버 사이드 렌더링 (SSR)
클라이언트에 주는 부담을 줄인다.
3.2. 단점
- 속도
SSR의 단점으로 서버가 느리면 웹사이트가 기하급수적으로 느려진다. 너무 엄격한 캐시 정책
Next.js 13 버전부터 사용자들의 원성을 사고 있는 너무 엄격한 캐시 정책 때문에 앱 라우터 사용을 꺼리는 경우가 많다. 기본적으로 캐시는 앱 최적화의 필수 요소이긴 하지만, 사용자가 원하는 조건에 캐시를 갱신하거나, 아예 캐시가 없어야 하는 시나리오임에도 캐시 정책이 원치 않게 작동하여, 컨텐츠 전달 시 어려움으로, 이로 인한 이슈가 지속적으로 제기되고 있으나, 활발한 커뮤니티 참여를 통해 14.1 부터 고질적인 자체 호스팅 내 유연하지 못한 캐시 문제를 개선하여 직접 캐시 관리를 꾀할 수 있는 설정을 제공함으로써 Redis 같은 DB등을 통한 공유 캐시를 사용할 길이 열고, 실험적으로 전역 캐시 시간 설정이 가능해 지며 이는 15 버전에서 기본값으로 캐시를 비활성화하도록 하고, 사용자가 캐시 여부와 시간을 선택하는 폭을 늘려 해결했다. 아직 100% 캐시 문제를 해결할 수 있는 일부 옵션이 실험적 기능으로 제공하고 있기 때문에 지켜볼 단계지만, 대부분 해소되었다.- 불친절한 오류 안내
Next.js 개발 시 오류가 발생했을 때, 내부적인 Stack Trace만 제공하여 다른 SSR 프레임워크 개발 환경 대비 불편한 오류 대응이 드디어 14.1 에 친절하게 오류 위치를 알려주는 방식으로 개선되었다. 하지만 런타임 오류 상에서 나타나는 일부 불친절한 오류가 나는 케이스가 있는데, 이는 Next.js 가 아닌 React 문제이다. 이는 React 19 버전에서 개선 예정. - 개발 서버 메모리 누수 등의 메모리 관리 문제
공식 이슈에서 내부적으로 작년부터 제기된 이슈로, 공식 팀이 지속적으로 확인하고 해결하고 있다고는 하나, 이슈 제기 이후에도 사용자 사이에서 적게는 1GB, 많게는 14GB, 심하면Out of memory로 인한 서버 종료 사례까지 보고되고 있다.
주로 메모리 누수가 발견된 사례는, - react 아이콘 컴포넌트 적재, 아이콘 컴포넌트 라이브러리들이 보통 많은 컴포넌트(많게는 수만개)를 제공하기 때문.
- 컴포넌트 간의 순환 참조
- webpack 커스터마이징
- Next.js 제공
fetch함수와 관련된 문제 (Axios 를 써서 해결했다는 사례가 있다.)
현재 이 이슈는 최근 버전인
15.0.1 에서도 사례가 보고되고 있으며, 현재 가능한 해결 방법은 개발 서버를 필요한 만큼만 사용하고 종료하는 것 뿐이다.공식 팀 및 기여자들은 Next.js 와 webpack 간 연계 문제로 추정하고 있으며, React SPA 앱이나 Remix(프레임워크) 같은 타 생태계를 쓰는 프레임워크에서는 해당하지 않는다.
4. Next.js를 사용하는 기업이나 서비스
- Vercel
- 틱톡
- Twitch
- Hulu
- 나이키
- TypeForm
- 닌텐도
- TED
- Styled-components
- 엘라스틱 서치
- repl.it
- Avocode
- solved.ac
- Wolfram Alpha
- 뉴욕시립 도서관
- Perplexity
- PayPal
- Gumroad
- Supabase
5. 강의
5.1. 유튜브
5.2. 웹사이트
6. 관련 문서
- Vercel
- React(라이브러리)
- webpack - 현재 Next.js 의 번들러는 webpack 단독으로 채택 중인데, Webpack 팀이 Vercel에 합류하면서 개발 중인 Turbopack 번들러로 적극적인 전환 중. 현재 베타 단계로 이용 가능하다.