[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]]