[include(틀:웹 프레임워크)]
||<-2>
{{{+1 '''Next.js'''}}} ||
||<-2> [[파일:next.svg|width=100%]] ||
|| '''종류''' ||[[프레임워크]] ||
|| '''라이선스''' ||[[MIT 라이선스]] ||
|| '''개발''' ||[[Vercel]] ||
## Next를 만든 언어를 뜻합니다
|| '''언어''' ||[[JavaScript]] ||
|| '''지원 문법''' ||[[JSX]] ||
|| '''렌더링 방식''' ||[[SSR]] / [[SSG]] ||
|| '''버전''' ||v14.0.0 ||
|| '''링크''' ||[[https://nextjs.org|[[파일:홈페이지 아이콘.svg|width=22]]]] ||
[목차]
[clearfix]
== 개요 ==
[[Vercel]]이 개발한 [[오픈 소스]] [[React(라이브러리)|react]] [[프레임워크]].
== 상세 ==
기본적으로 [[SSR]] 위주의 [[프로그래머#s-2.6.3|풀스택]] 기반 프레임워크를 주력으로 성장하고 있으며, 풀스택 프레임워크답게 API 기능 및 서버 컴포넌트를 통한 서버측 기능과, React 컴포넌트를 통한 클라이언트 기능으로 나뉘어 통합 제공하는 프레임워크이다. 현재 node.js 기반의 안정적인 풀스택 프레임워크로 사랑받고 있으며, [[SSG]] 방식 또한 제공한다. [[React(라이브러리)|react]] [[https://react.dev/learn/start-a-new-react-project|공식 시작하기 문서]]를 열람할 시, 가장 먼저 이 Next.js 프레임워크를 통한 시작하기가 가장 상단에 표시될 정도로 React의 거의 대표급 프레임워크이다.
파일 페이지 라우터(기존)과 13부터 안정화된 폴더 방식의 앱 라우터(아래 참조) 두가지 라우팅 방식을 지원하며, 라우팅 규칙이 충돌하지 않는 내에서 두 라우팅 방식을 모두 사용할 수 있다. 또한, 앱 라우터가 완전히 안정화한다 해도, 기존 페이지 라우팅 방식은 지속적으로 관리하기 때문에 차기 개발 시에도 취향이나 정책에 맞게 적절히 사용하면 된다.
=== 앱 라우터 ===
[[파일:file-conventions-component-hierarchy.webp]]
[[https://nextjs.org/docs/app/building-your-application/routing|App router.]]
Next.js 12 버전에서 알파, 베타 테스트를 시작하면서 13.4에서 안정화된 기능으로, 간단히 요약하면, 기존의 파일 기반의 라우팅에서 폴더 기반 라우팅으로 바뀌면서, 여기에 폴더 하위에 여러 기능을 조합하여 사용할 수 있는 강력한 앱 라우팅 기능을 제공한다. 물론 기존 파일 기반의 라우팅을 사용할 수도 있으나, 폴더 기반의 앱 라우팅 기능을 사용하기 위해 폴더 기반의 경로에 아래와 같이 각각의 역할이 담긴 파일명과 {{{js, ts, jsx, tsx}}} 확장자를 작성하면 된다.
* 레이아웃({{{layout.js}}}): 상위에서 중첩이 가능한 페이지 틀을 담당하는 상위 컴포넌트
* 페이지({{{page.js}}}): 주 페이지 내용을 표시하는 컴포넌트 (기존 파일 기반 컴포넌트 역할 계승)
* 오류({{{error.js}}}): 페이지에서 오류가 발생할 경우 표시되는 컴포넌트
* 불러오기({{{loading.js}}}): {{{}}} 컴포넌트의 {{{fallback}}} 속성과 동일한 원리로 페이지를 불러오기 전 표시할 컴포넌트
* 없는 페이지({{{not-found.js}}}): 하위 페이지 탐색 시 없을 경우 표시할 페이지 컴포넌트
* 템플릿({{{template.js}}}): 기본적으로 Next.js 에서 페이지 이동 시 상태가 유지되는데, 이 기능을 쓰면 해당 페이지 및 하위 페이지 이동 시 상태를 다시 관리하는 상태가 된다. 주로 CSS 애니메이션을 종료하거나, 회수해야 할 라이브러리가 존재하는 등 목적에 적합하며, 공식적으로 고급 기능으로 취급한다.
비슷한 유형의 다른 SSR 프레임워크들이 이 App 라우팅에 주목하고 있으며, 현재 Next.js 외에 폴더 기반 라우팅을 채택한 풀스택 프레임워크는 Next.js 보다 더 빨리, 베타 도중 갑작스레 도입하여 정식 출시한 [[Svelte|SvelteKit]]가 있다.
=== 서버 컴포넌트 ===
[[파일:thinking-in-server-components.webp]]
[[https://nextjs.org/docs/getting-started/react-essentials#server-components|Server components]]
[[React(라이브러리)|react]] 공식 팀과 협력하고 있는 서버 컴포넌트는 말 그대로 컴포넌트를 서버에서 관리하여 서버가 가지는 기능(DB 및 파일, 보안 등)에 대해 React가 가지는 기능과 결합하여 서비스를 제공하는 매우 강력한 기능으로, 아직 [[https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components|RFC]] 단계인 이 서버 컴포넌트의 구현체를 Next.js 에서 앞서 제공하고 있다.
=== 예시 ===
==== 프로젝트 시작 ====
{{{#!syntax sh
npx create-next-app@latest}}}
== 특징 ==
* Zero Config: 서비스를 구축하는 데 필요한 최소한의 설정만을 요구하며 컴파일링, 번들링 등 코드가 실제로 만들어지는 과정은 내부적으로 처리한다.
* 속도: [[Vercel]]의 목표 중 하나가 'Fast Web'이라는 데서도 알 수 있듯이, 기본적으로 속도를 중시한다.
SSR구조 자체로 인한 렌더링 성능과는 별개로 [[SWC]]등의 컴파일러를 차용하여 꾸준히 빌드 속도를 올리고 있다.
* (S)CSS 및 [[TypeScript]] 내장 지원
=== 장점 ===
1. 정적인 구축
정적으로 빠르게 구축할 수 있다.
1. 서버 사이드 렌더링 (SSR)
클라이언트에 주는 부담을 줄인다.
=== 단점 ===
1. 속도
SSR의 단점으로 서버가 느리면 웹사이트가 기하급수적으로 느려진다.
1. '''너무 엄격한 캐시 정책'''
Next.js 13 버전부터 사용자들의 원성을 사고 있는 너무 엄격한 캐시 정책 때문에 앱 라우터 사용을 꺼리는 경우가 많다. 기본적으로 캐시는 앱 최적화의 필수 요소이긴 하지만, 사용자가 원하는 조건에 캐시를 갱신하거나, 아예 캐시가 없어야 하는 시나리오임에도 캐시 정책이 원치 않게 작동하여, 컨텐츠 전달 시 어려움으로, 이로 인한 이슈가 지속적으로 제기되고 있는 상황이다.
== Next.js를 사용하는 기업이나 서비스 ==
* [[Vercel]]
* [[틱톡]]
* [[Twitch]]
* [[Hulu]]
* [[나이키]]
* [[TypeForm]]
* [[닌텐도]]
* [[TED]]
* [[Styled-components]]
* [[엘라스틱 서치]]
* [[repl.it]]
* [[Avocode]]
* [[solved.ac]]
== 관련 문서 ==
* [[Vercel]]
* [[React(라이브러리)]]
* [[webpack]] - 현재 Next.js 의 번들러는 webpack 단독으로 채택 중인데, Webpack 팀이 [[Vercel]]에 합류하면서 개발 중인 [[https://turbo.build/pack|Turbopack]] 번들러로 적극적인 전환 중. 현재 베타 단계로 이용 가능하다.
[[분류:웹 프레임워크]][[분류:JavaScript]]