Next Docs

시스템 요구사항Node.js 16.8 이상macOS, Windows (WSL 포함), 그리고 Linux가 지원된다.자동 설치 create-next-app을 사용하여 새로운 Next.js 앱을 만드는 것을 권장한다.설치 중에 아래와 같은 프롬프트가 표시된다.Next.js

모든 애플리케이션의 기본 구조는 Routing이다. 이 페이지에서는 웹 라우팅의 기본 개념과 Next.js에서 라우팅을 처리하는 방법을 소개한다.용어아래와 같이 문서 전체에서 사용되는 용어들을 볼 수 있다. Tree :계층 구조를 시각화하는 데 사용되는 관례. 예를 들

라우트 생성하기app 디렉토리 내부에서, 폴더들은 라우트를 정의하는 데 사용된다.각 폴더는 URL 세그먼트에 매핑되는 라우트 세그먼트를 나타낸다. 중첩된 라우트를 만들기 위해 폴더를 서로 중첩시킬 수 있다.특수한 page.js 파일을 사용하여 라우트 세그먼트를 공개적으

Next.js 13 내부의 App Router는 페이지, 공유 레이아웃 및 템플릿을 쉽게 생성하기 위한 새로운 파일 규칙을 도입했다. 이 페이지에서는 Next.js 애플리케이션에서 이러한 특별한 파일을 사용하는 방법을 안내한다.Pages페이지는 경로에 고유한 UI이다.

Next.js 라우터는 server-centric routing과 client-side navigation을 사용한다. 이는 즉각적인 로딩 상태와 동시 렌더링을 지원한다. 내비게이션이 클라이언트 측 상태를 유지하고 비용이 많이 드는 리렌더링을 피하며, 중단 가능하며

app 폴더의 계층 구조는 URL 경로와 직접 매핑된다. 그러나 라우트 그룹을 생성하여 이러한 패턴을 벗어날 수 있다. 라우트 그룹은 괄호로 폴더 이름을 감싸면 생성할 수 있다. (폴더이름) 라우트 그룹은 다음과 같은 용도로 사용할 수 있다.URL 구조에 영향을 주지

정확한 세그먼트 이름을 미리 알지 못하고 동적 데이터에서 라우트를 생성하려는 경우, 요청 시간에 채워지거나 빌드 시간에 사전 렌더링된 동적 세그먼트를 사용할 수 있다.Dynamic Routes 규칙대괄호(\[])로 폴더 이름을 감싸면 동적 세그먼트를 생성할 수 있다.

loading.js를 사용하면 React Suspense와 함께 의미 있는 로딩 UI를 생성할 수 있다. 이 기능을 사용하면 라우트 세그먼트의 내용을 로드하는 동안 서버로부터 즉시 로딩 상태를 표시하고, 렌더링이 완료되면 자동으로 새로운 콘텐츠로 교체된다.Instant

error.js 파일 규칙을 사용하면 중첩된 경로에서 런타임 오류를 우아하게 처리할 수 있다.React 에러 바운더리를 사용하여 경로 세그먼트와 해당 중첩된 자식들을 자동으로 감싼다.파일 시스템 계층 구조를 사용하여 특정 세그먼트에 맞는 오류 UI를 만들어 세분화 수준

병렬 라우팅은 동시에 혹은 조건에 따라 동일한 레이아웃에서 하나 이상의 페이지를 렌더링하는 기능이다.대시보드나 소셜 사이트의 피드와 같이 매우 동적인 앱 섹션에 대해, 병렬 라우팅을 사용하여 복잡한 라우팅 패턴을 구현할 수 있다.예를 들어, 팀 페이지와 분석 페이지를

경로를 가로채는 것을 통해 현재 레이아웃 내에서 경로를 로드하면서 현재 페이지의 컨텍스트를 유지할 수 있다. 이 라우팅 패러다임은 특정 경로를 "가로채서" 다른 경로를 보여줄 때 유용하다.예를 들어, 피드 내부에서 사진을 클릭하면 피드 위에 사진이 오버레이되는 모달이

Route Handlers를 사용하면 Web 요청 및 응답 API를 사용하여 특정 경로에 대한 사용자 정의 요청 핸들러를 만들 수 있다.Route Handlers는 app 디렉토리 내에서만 사용할 수 있다. 이는 pages 디렉토리 내의 API Routes와 동등한 기

Middleware미들웨어를 사용하면 요청이 완료되기 전에 코드를 실행할 수 있다. 그런 다음 들어오는 요청에 따라 request 또는 response header를 rewriting, redirecting , modifying하거나 직접 응답하여 response를 수

Next.js를 사용하면 다국어를 지원하기 위해 콘텐츠의 라우팅과 렌더링을 구성할 수 있다. 다른 로케일에 대응하는 사이트는 번역된 콘텐츠(로컬라이제이션)와 국제화된 라우트를 포함한다.로캘(Locale): 언어와 서식 설정에 대한 식별자입니다. 일반적으로 사용자의 기본

렌더링은 작성한 코드를 사용자 인터페이스로 변환하는 과정이다.애플리케이션 코드를 렌더링할 수 있는 두 가지 환경이 있다: 클라이언트와 서버이다.클라이언트는 사용자 장치의 브라우저를 의미하며, 애플리케이션 코드에 대한 서버에 요청을 보낸다. 그런 다음 서버로부터의 응답을

Next.js에서는 라우트를 정적으로 또는 동적으로 렌더링할 수 있다.정적 라우트에서는 컴포넌트가 빌드 시 서버에서 렌더링된다. 작업의 결과는 캐시되어 이후의 요청에서 재사용된다.동적 라우트에서는 컴포넌트가 요청 시 서버에서 렌더링된다.정적 렌더링은 모든 렌더링 작업이

Next.js의 런타임(runtime)은 실행 중에 코드에서 사용할 수 있는 라이브러리, API 및 일반적인 기능 집합을 의미한다.Next.js에는 애플리케이션 코드의 일부를 렌더링할 수 있는 두 가지 서버 런타임이 있다Node.js 런타임Edge 런타임각 런타임은 고

Next.js 앱 라우터는 React와 Web 플랫폼을 기반으로 한 새로운, 간소화된 데이터 패칭 시스템을 소개한다. 이 페이지에서는 데이터의 라이프사이클을 관리하는 데 도움이 되는 기본 개념과 패턴을 살펴볼 것이다.다음은 이 페이지에서의 권장 사항에 대한 간략한 개요

React와 Next.js 13은 응용 프로그램에서 데이터를 가져오고 관리하기 위한 새로운 방법을 소개했다. 이 새로운 데이터 가져오기 시스템은 app 디렉토리에서 작동하며, fetch() 웹 API를 기반으로 구축되었다.fetch()는 원격 리소스를 가져오기 위해 사

Next.js는 데이터의 캐싱을 내장하고 있으며, 요청 단위로 (권장되는 방식) 또는 전체 라우트 세그먼트에 대해 캐싱을 지원한다.기본적으로 모든 fetch() 요청은 자동으로 캐싱되고 중복 제거된다. 이는 동일한 요청을 두 번 시도하면 두 번째 요청은 첫 번째 요청의

Next.js를 사용하면 전체 사이트를 다시 빌드할 필요 없이 특정 정적 경로를 업데이트할 수 있다. 재유효화(증분적 정적 재생성으로도 알려짐)를 사용하면 정적인 이점을 유지하면서 수백만 개의 페이지로 확장할 수 있다.Next.js에서는 두 가지 유형의 재유효화가 있다

Server Actions은 Next.js의 알파 기능으로, React Actions을 기반으로 구축되었다. 이 기능을 사용하면 서버 측 데이터 변경, 클라이언트 측 JavaScript 감소 및 점진적으로 향상된 폼을 구현할 수 있다.Next.js 프로젝트에서 Serv

Next.js는 애플리케이션의 스타일링을 위해 다양한 방법을 지원한다.Global CSS : 전통적인 CSS에 익숙한 사용자에게는 간단하고 익숙한 방법이지만, 애플리케이션이 커짐에 따라 CSS 번들이 커지고 스타일 관리가 어려워질 수 있다.CSS Module : 이름

Next.js에는 애플리케이션의 속도와 Core Web Vitals를 개선하기 위해 설계된 다양한 내장 최적화 기능이 제공된다. 내장 컴포넌트는 일반적인 UI 최적화를 구현하는 복잡성을 추상화한다. 이러한 컴포넌트는 다음과 같다.네이티브 <img> 요소를 기반으로

Next.js의 Image 컴포넌트는 HTML <img> 요소를 확장하여 다음과 같은 기능을 제공한다.크기 최적화WebP 및 AVIF와 같은 현대적인 이미지 형식을 사용하여 각 장치에 맞게 올바르게 크기 조정된 이미지를 자동으로 제공한다.시각적 안정성이미지가 로드

next/font는 폰트를 자동으로 최적화하고(사용자 정의 폰트 포함) 개인 정보 보호와 성능 향상을 위해 외부 네트워크 요청을 제거한다. 참고자료next/font에는 모든 폰트 파일에 대한 내장 자동 셀프 호스팅 기능이 포함되어 있다. 이는 사용되는 기본 CSS si

여러 경로에 대해 타사 스크립트를 로드하려면 next/script를 가져오고 스크립트를 직접 레이아웃 컴포넌트에 포함시킨다.사용자가 폴더 경로 (예: dashboard/page.js) 또는 중첩된 경로 (예: dashboard/settings/page.js)에 액세스할

Next.js에는 SEO 및 웹 공유성을 향상시키기 위해 애플리케이션의 메타데이터(예: HTML head 요소 내부의 meta 및 link 태그)를 정의할 수 있는 Metadata API가 있다.애플리케이션에 메타데이터를 추가하는 두 가지 방법이 있다.구성 기반 메타데

Next.js는 루트 디렉토리에 public이라는 폴더 아래와 같이 이미지와 같은 정적 파일을 제공할 수 있다.public 내부의 파일은 기본 URL (/)을 기준으로 코드에서 참조할 수 있다.예를 들어, public 내부에 me.png를 추가하면 다음 코드로 이미지에

Next.js의 레이지 로딩은 경로를 렌더링하는 데 필요한 JavaScript 양을 줄여 애플리케이션의 초기 로딩 성능을 향상시키는 데 도움이 된다.레이지 로딩을 사용하면 클라이언트 컴포넌트와 가져온 라이브러리의 로딩을 지연시킬 수 있으며, 필요할 때만 클라이언트 번들

아래는 <Image> 컴포넌트에서 사용 가능한 props다.이미지 컴포넌트에는 src, width, height, alt 속성이 필요하다.src 속성에는 정적으로 가져온 이미지 파일 또는 경로 문자열을 사용해야한다. loader 속성에 따라 절대적인 외부 URL

<Link>는 React 컴포넌트로, HTML <a> 요소를 확장하여 prefetching(사전로드) 및 클라이언트 측에서 라우트 간 탐색을 제공한다. 이는 Next.js에서 라우트 간 탐색을 위한 주요 방법이다.Next.js 애플리케이션에서 <Link

아래는 <Script>에서 사용 가능한 요소들이다.<Script /> 컴포넌트는 다음과 같은 속성이 필요하다.외부 스크립트의 URL을 지정하는 경로 문자열이다. 이는 절대 외부 URL이나 내부 경로일 수 있다. src 속성은 인라인 스크립트를 사용하지 않는

error.js는 경로 세그먼트에 대한 오류 UI 경계를 정의한다.error 객체의 인스턴스다. 이 오류는 서버나 클라이언트에서 발생할 수 있다.응답을 반환하지 않는 error boundary를 재설정하는 함수다.error.js boundary는 클라이언트 컴포넌트여야