Next.js

덤프버전 :

분류

웹 프레임워크 및 기술

[ 펼치기 / 접기 ]
$ 유료 포함 • 취소선 단종 및 중단
프론트엔드
CSS
Bootstrap • Tailwind CSS • Bulma • Foundation • Skeleton • Pico
JSX
React • Next.js • Gatsby • Remix • Astro • Preact • SolidJS • Inferno • Qwik
JS
Angular • Svelte • Backbone.js • Ember.js • jQuery • Astro • Lit • 11ty • Marko • VanJS • htmx
Vue
Nuxt.js • VuePress • Gridsome • Quasar • Astro
Python
Reflex
백엔드
Java
Spring • Struts • GWT • Grails • Jooby • Play! FrameworkScala
Kotlin
Ktor
JS
Express • koa • NestJS • Hono
.NET
ASP.NET$
PHP
Laravel • Codeigniter • Reasonable • phalcon • Symfony • zend • CakePHP • FuelPHP • Yii • Slim • PHPixe
Python
Django • Flask
Ruby
Ruby on Rails • Sinatra
풀스택
JSX
Next.js • Remix • Astro • SolidStart • Qwik City
JS
SvelteKit • Fresh • Astro • Marko
Vue
Nuxt.js • Quasar • Astro
Java
Vaadin$
Python
Streamlit • Reflex
하이브리드
.NET
Blazor
Dart
Flutter
Kotlin
Kotlin Multiplatform




Next.js
파일:next.svg
종류
프레임워크
라이선스
MIT 라이선스
개발
Vercel
언어
JavaScript
지원 문법
JSX
렌더링 방식
SSR / SSG
버전
v14.0.0
링크
파일:홈페이지 아이콘.svg
1. 개요
2. 상세
2.1. 앱 라우터
2.2. 서버 컴포넌트
2.3. 예시
2.3.1. 프로젝트 시작
3. 특징
3.1. 장점
3.2. 단점
4. Next.js를 사용하는 기업이나 서비스
5. 관련 문서



1. 개요[편집]

Vercel이 개발한 오픈 소스 react 프레임워크.


2. 상세[편집]

기본적으로 SSR 위주의 풀스택 기반 프레임워크를 주력으로 성장하고 있으며, 풀스택 프레임워크답게 API 기능 및 서버 컴포넌트를 통한 서버측 기능과, React 컴포넌트를 통한 클라이언트 기능으로 나뉘어 통합 제공하는 프레임워크이다. 현재 node.js 기반의 안정적인 풀스택 프레임워크로 사랑받고 있으며, SSG 방식 또한 제공한다. react 공식 시작하기 문서를 열람할 시, 가장 먼저 이 Next.js 프레임워크를 통한 시작하기가 가장 상단에 표시될 정도로 React의 거의 대표급 프레임워크이다.

파일 페이지 라우터(기존)과 13부터 안정화된 폴더 방식의 앱 라우터(아래 참조) 두가지 라우팅 방식을 지원하며, 라우팅 규칙이 충돌하지 않는 내에서 두 라우팅 방식을 모두 사용할 수 있다. 또한, 앱 라우터가 완전히 안정화한다 해도, 기존 페이지 라우팅 방식은 지속적으로 관리하기 때문에 차기 개발 시에도 취향이나 정책에 맞게 적절히 사용하면 된다.


2.1. 앱 라우터[편집]


파일:file-conventions-component-hierarchy.webp
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 보다 더 빨리, 베타 도중 갑작스레 도입하여 정식 출시한 SvelteKit가 있다.

2.2. 서버 컴포넌트[편집]


파일:thinking-in-server-components.webp
Server components

react 공식 팀과 협력하고 있는 서버 컴포넌트는 말 그대로 컴포넌트를 서버에서 관리하여 서버가 가지는 기능(DB 및 파일, 보안 등)에 대해 React가 가지는 기능과 결합하여 서비스를 제공하는 매우 강력한 기능으로, 아직 RFC 단계인 이 서버 컴포넌트의 구현체를 Next.js 에서 앞서 제공하고 있다.


2.3. 예시[편집]


2.3.1. 프로젝트 시작[편집]

npx create-next-app@latest



3. 특징[편집]

  • Zero Config: 서비스를 구축하는 데 필요한 최소한의 설정만을 요구하며 컴파일링, 번들링 등 코드가 실제로 만들어지는 과정은 내부적으로 처리한다.
  • 속도: Vercel의 목표 중 하나가 'Fast Web'이라는 데서도 알 수 있듯이, 기본적으로 속도를 중시한다.
SSR구조 자체로 인한 렌더링 성능과는 별개로 SWC등의 컴파일러를 차용하여 꾸준히 빌드 속도를 올리고 있다.


3.1. 장점[편집]

  1. 정적인 구축
정적으로 빠르게 구축할 수 있다.
  1. 서버 사이드 렌더링 (SSR)
클라이언트에 주는 부담을 줄인다.


3.2. 단점[편집]

  1. 속도
SSR의 단점으로 서버가 느리면 웹사이트가 기하급수적으로 느려진다.
  1. 너무 엄격한 캐시 정책
Next.js 13 버전부터 사용자들의 원성을 사고 있는 너무 엄격한 캐시 정책 때문에 앱 라우터 사용을 꺼리는 경우가 많다. 기본적으로 캐시는 앱 최적화의 필수 요소이긴 하지만, 사용자가 원하는 조건에 캐시를 갱신하거나, 아예 캐시가 없어야 하는 시나리오임에도 캐시 정책이 원치 않게 작동하여, 컨텐츠 전달 시 어려움으로, 이로 인한 이슈가 지속적으로 제기되고 있는 상황이다.


4. Next.js를 사용하는 기업이나 서비스[편집]



5. 관련 문서[편집]

  • Vercel
  • React(라이브러리)
  • webpack - 현재 Next.js 의 번들러는 webpack 단독으로 채택 중인데, Webpack 팀이 Vercel에 합류하면서 개발 중인 Turbopack 번들러로 적극적인 전환 중. 현재 베타 단계로 이용 가능하다.


파일:크리에이티브 커먼즈 라이선스__CC.png 이 문서의 내용 중 전체 또는 일부는 2023-10-31 23:04:16에 나무위키 Next.js 문서에서 가져왔습니다.

관련 문서