error.js 파일 규칙을 사용하면 중첩된 경로에서 런타임 오류를 우아하게 처리할 수 있습니다. React Error Boundary 내에 라우트 세그먼트와 해당 중첩된 하위 항목을 자동으로 래핑합니다. 파일 시스템 계층 구조를 사용하여 세분화를 조정하여 특정 세그먼트에 맞는 오류 UI를 생성합니다. 오류를 해당 세그먼트로 격리시키면서 나머지 앱은 정상적으로 동작합니다. 전체 페이지 새로고침 없이 오류로부터 복구를 시도하는 기능을 추가할 수 있습니다. route segment 내에 error.js 파일을 추가하고 React 컴포넌트를 내보내어 오류 UI를 생성합니다. /* app/dashboard/error.tsx */ 'use client' // 에러 컴포넌트는 클라이언트 컴포넌트로 만들어야합니다. ..
loading.js 파일은 React Suspense를 자동으로 래핑하여 스트리밍 형태의 로딩 UI를 생성하는 데 도움을 줍니다. 이 컨벤션을 사용하면 라우트 세그먼트의 내용을 로드하는 동안 서버에서 즉시 로딩 상태를 표시하고, 렌더링이 완료되면 자동으로 새로운 콘텐츠로 교체됩니다. Instant Loading States 인스턴트 로딩 상태는 탐색 시 즉시 표시되는 대체 UI입니다. 스켈레톤이나 스피너와 같은 로딩 표시기 또는 향후 화면의 작은 부분(커버 사진, 제목 등)과 같은 의미 있는 요소를 사전 렌더링하여 로딩 상태를 만들 수 있습니다. 이를 통해 사용자가 애플리케이션이 응답하고 있다는 것을 이해할 수 있으며, 더 나은 사용자 경험을 제공할 수 있습니다. 폴더 내에 loading.js 파일을 추..
정확한 세그먼트 이름을 미리 알지 못하고 동적 데이터에서 경로를 생성하려는 경우 요청 시 채워지거나 빌드 시 미리 렌더링되는 동적 세그먼트를 사용할 수 있습니다. Convention 동적 세그먼트는 폴더 이름을 대괄호로 묶음으로써 생성할 수 있습니다: [folderName]. 예를 들어 [id] 또는 [slug]입니다. 동적 세그먼트는 레이아웃, 페이지, 경로 및 generateMetadata 함수에 params 소품으로 전달됩니다. Example 예를 들어 블로그에는 app/blog/[slug]/page.js 경로가 포함될 수 있습니다. 여기서 [slug]는 블로그 게시물의 동적 세그먼트입니다. /* app/blog/[slug]/page.js */ export default function Page({..
앱 디렉토리에서는 중첩된 폴더가 일반적으로 URL 경로에 매핑됩니다. 그러나 폴더를 Route 그룹으로 표시하여 해당 폴더가 경로의 URL 경로에 포함되지 않도록 할 수 있습니다. 이를 통해 URL 경로 구조에 영향을주지 않고 라우트 세그먼트와 프로젝트 파일을 논리적으로 구성할 수 있습니다. 라우트 그룹은 다음과 같은 경우에 유용합니다: 사이트 섹션, 의도 또는 팀별로 경로를 구성 할 때 동일한 라우트 세그먼트 수준에서 중첩된 레이아웃을 활성화 할 때 여러 루트 레이아웃을 포함하여 동일한 세그먼트에 여러 중첩 레이아웃 만들기 특정 세그먼트를 레이아웃으로 선택 할 때 💡 Next.js에서 "의도(Intent)"란 사용자가 애플리케이션에서 수행하려는 작업이나 목적을 나타냅니다. 일반적으로 사용자가 웹 애플리..
Next.js 라우터는 클라이언트 측 탐색과 함께 서버 중심 라우팅을 사용합니다. 즉각적인 로딩 상태 및 동시 렌더링을 지원합니다. 이는 내비게이션이 클라이언트 측 상태를 유지하고 비용이 많이 드는 재 렌더링을 피하며, 중단 가능하며, 경쟁 조건을 발생시키지 않는다는 것을 의미합니다. 라우트 간 이동하는 두 가지 방법이 있습니다: 컴포넌트 useRouter 훅 컴포넌트 은 Next.js에서 라우트 간 이동을 위한 주요 방법입니다. 은 HTML 요소를 확장하여 라우트 간의 사전 로드(prefetching)와 클라이언트 측 탐색을 제공하는 React 컴포넌트입니다. 를 사용하려면 next/link에서 가져와서 컴포넌트에 href 속성을 전달하세요: /* app/page.tsx */ import Link fr..
Next.js 13 내부의 앱 라우터는 페이지(page), 공유 레이아웃(layout) 및 템플릿(template)을 쉽게 생성하기 위한 새로운 파일 규칙을 도입했습니다. 이 페이지는 Next.js 애플리케이션에서 이러한 특수 파일을 사용하는 방법을 안내합니다. 페이지(Pages) 페이지는 경로에 고유한 UI입니다. 페이지를 정의하기 위해 page.js 파일에서 컴포넌트를 내보내는 방식을 사용할 수 있습니다. 중첩된 폴더를 사용하여 경로를 정의하고, route와 page.js 파일을 사용하여 해당 경로에 대해 공개적으로 접근할 수 있도록 만들 수 있습니다. Good to know: 페이지는 항상 route subtree의 leaf 입니다. 그래서 컴포넌트 계층을 보면 페이지 컴포넌트가 가장 안쪽에 있는 ..
이 페이지는 Next.js 애플리케이션에서 경로를 정의하고 구성하는 방법을 안내합니다. Route 만들기 Next.js는 폴더가 경로를 정의하는 데 사용되는 파일 시스템 기반 라우터를 사용합니다. 각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타냅니다. 중첩된 경로를 만들려면 폴더를 서로 중첩할 수 있습니다. 경로 세그먼트를 공개적으로 액세스 할 수 있도록 특수 page.js 파일이 사용됩니다. 위 그림에서 /dashboard/analytics URL 경로는 해당 page.js 파일이 없기 때문에 공개적으로 액세스 할 수 없습니다. 이 폴더는 구성 요소, 스타일시트, 이미지 또는 기타 배치된 파일을 저장하는 데 사용할 수 있습니다. UI 만들기 각 경로 세그먼트에 대한 UI를 생성하기 위해 특별..
모든 어플리케이션의 뼈대는 라우팅입니다. 이번 페이지에서는 웹 라우팅의 기본적인 컨셉과 NextJS에서 라우팅을 어떻게 사용하는 소개합니다. 용어(Terminology) 설명서 전체에서 아래 이미지에 있는 용어가 사용됩니다. Tree (트리): 계층 구조를 시각화하기 위한 관례입니다. 예를 들어, 부모 및 자식 컴포넌트로 이루어진 컴포넌트 트리, 폴더 구조 등이 있습니다. Subtree (서브트리): 새로운 루트(첫 번째)에서 시작하여 잎(마지막)에서 끝나는 트리의 일부입니다. Root (루트): 트리나 서브트리에서의 첫 번째 노드로, 루트 레이아웃과 같은 역할을 합니다. Leaf (리프): 자식이 없는 서브트리의 노드로, URL 경로에서의 마지막 세그먼트 등이 있습니다. URL Segment (URL ..
