에러는 에샹한 에러와 예샹하지 못한 에러로 나누어 진다고 합니다. 예상한 에러의 경우 서버 액션에서는 try/catch 의 사용을 피하고 useFormState 를 통해 에러를 매니징 하고클라이언트에게 돌려주라고 합니다. 예상하지 못한 에러의 경우 error.tsx 와 global-error.tsx 파일을 사용해 에러 바운더리를 사용하고 fallback UI 를 제공하라고 합니다. Uncaught Exceptions이러한 에러의 경우에는 정상적인 플로우에서는 발생할 수 없고 throwing errors 를 통해 핸들링 되며에러 바운더리에 잡힌다고 합니다. Common : 루트 레이아웃의 error.js 파일에서 핸들링Optional : 중첩된 error.js 파일에서 핸들링Uncommon : 루트 레이..
Intercepting routes 는 애플리케이션의 다른 부분에 있는 라우트를 현재 레이아웃 내에서 로드할 수 있게 해줍니다.이 라우팅 패러다임은 사용자가 다른 컨텍스트로 전환하지 않고도 경로의 콘텐츠를 표시하려는 경우 유용할 수 있습니다. 예를 들어 피드 안에 있는 사진을 클릭했을 때 피드 위에 모달의 형태로 사진을 볼 수 있습니다.해당 케이스에서 Next.js 는 /photo/123 라우트를 가로채 URL 을 마스킹한 다음 /feed 에 오버레이 합니다. 그러나 해당 페이지에서 새로고침을 했을 때 모달이 아닌 사진 페이지의 전체가 렌더링 됩니다.해당 케이스에서 route interception 은 발생하지 않습니다. ConventionIntercepting routes 는 (..) 컨벤션으로 정..
Parallel Routes 는 동일한 레이아웃 내에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링 할 수 있습니다. 대시보드 및 소셜 사이트의 피드와 같이 매우 동적인 섹션에 Parellel Routes 가 유용하게 사용된다고 합니다. 위의 예시와 같이 team 과 analytics 페이지를 parallel routes 를 통해 동시에 렌더링 할 수 있다고 합니다.Slots [@folder]parallel routes 는 named slots 을 사용하여 생성된다고 합니다.슬롯은 @folder 규칙으로 정의 됩니다.위 예시의 파일 구조에서는 @analytics 와 @team 이라는 두 개의 슬롯을 정의합니다. 슬롯은 공유된 부모 레이아웃의 props 로 전달됩니다.위의 예시에서 app/layou..
정확한 세그먼트 이름을 미리 알지 못하고 동적인 데이터로부터 라우트를 만들고 싶을 때 동적 세그먼트를 사용할 수 있습니다. 동적 세그먼트의 경우 [folderName] 컨벤션을 가집니다.동적 세그먼트의 경우 params props 를 layout, page, route, generateMetadata 에 넘깁니다. Generating Static ParamsgenerateStaticParams 함수는 동적 경로 세그먼트와 함께 사용하여 요청 시점에 필요에 따라 생성하는 대신 빌드 시점에 정적으로 경로를 생성할 수 있습니다.generateStaticParams 함수의 주요 이점은 데이터를 스마트하게 검색한다는 것입니다.fetch 요청을 사용해 generateStaticParams 함수 내에서 콘텐츠를 f..
Next.js 는 파일을 구성하고 배치하는 방식에 대해 의견을 남기지 않습니다. 이 페이지는 프로젝트를 구성하는 데 사용할 수 있는 기본 동작과 기능을 공유한다고 합니다. Safe colocation by defaultapp directory 내에서 중첩된 폴더 구조를 통해 라우트 구조를 정의합니다.각 폴더는 라우트 세그먼트에 대응되고 URL path 의 세그먼트에 대응됩니다. 그러나, 폴더 구조를 정의한다 하더라도 page.js 또는 route.js 파일이 없다면 공개적으로 접근할 수 없습니다.이 말은 실수로 라우팅할 수 없는 프로젝트 파일을 앱 디렉토리의 경로 세그먼트 내에 안전하게 위치시킬 수 있다는 것을 의미합니다.Project organization featuresPrivate Folders비공..
app 디렉토리에서 중첩된 폴더 구조는 보통 URL 경로에 매핑됩니다.그러나 folder 가 URL 경로에 포함되는 것을 방지하기 위해 폴더를 Route Group 으로 구성할 수 있습니다. Rotue Groups 는 (forlderName) 으로 구성할 수 있습니다. Organize routes without affecting the URL path URL에 영향을 주지 않는 라우트를 구성하려면 관련 경로를 함께 묶는 그룹을 만들라고 합니다.괄호 안의 폴더는 경로에서 생략됩니다. 이 케이스에서 marking 과 shop 내에는 동일한 URL 계층을 가지게 됩니다. 각 그룹에 layout.js 파일을 둬 다른 레이아웃을 구성할 수 있습니다.Opting specific segments into a lay..
Next.js 에서는 redirects 를 다루는 여러 방법을 제공하고 있습니다. redirect functionredirect 함수는 Server Components, Route Handlers, Server Actions 에서 호출할 수 있다고 합니다. permanentRedirect functionpermanentRedirect function 은 다른 URL 로 영구적으로 리디렉션 할 수 있습니다.해당 함수는 사용자 이름을 변경한 후 사용자 프로필 URL 을 업데이트하는 등표준 URL 을 변경하는 뮤테이션이나 이벤트 이후에 자주 사용됩니다.useRouter() hook클라이언트 컴포넌트의 이벤트 핸들러에서 redirect 를 하기 위해서는 push 메서드를 사용할 수 있습니다.redirects i..
loading.js 파일은 React Suspense 를 활용해 로딩 UI 를 만들어줍니다.콘텐츠가 로드되는 동안 서버에서 즉시 로드 상태를 표시할 수 있고렌더링이 완료되면 새 콘텐츠가 자동으로 스왑된다고 합니다.Instant Loading Statesinstant loading state 는 탐색 즉시 보여지는 fallback UI 입니다.스켈레톤 및 스피너와 같은 로딩 표시기나 표지 사진, 제목 등 의미있는 향후 화면의 일부를 미리 렌더링 할 수 있습니다.이는 사용자에게 앱이 반응하고 있다는 것을 이해시킬 수 있고 더 나은 UX 를 제공합니다. 동일한 폴더에서 loading.js 는 layout.js 내에 위치하게 됩니다.이것은 자동으로 page.js 파일을 감싸고 모든 하위 파일을 경계에 자동으..
