12. Route HandlerRoute Hnadler는 Web Request, Response API를 이용해서 custom request handler를 만들 수 있게 도움을 준다.Route Handler는 app directory에서만 유효하며, page directory의 API Route와 동일한 개념이다.Route Handler는 route.js | ts로 명명해야 하며, page와 동일한 level에서 함께 존재할 수 없다. (ex. app/settings/page.tsx가 있으면, Route Handler는 있으면 안된다.)GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS HTTP Methods 지원하고, 그 외 Method는 405 Method Not All..

외전. Intercepting Routes과 Parallel Routes 실습Parallel Routes와 Intercepting Routes는 완전히 처음 보는 개념이라 이해하는 데 어려움이 있다.항상 새로운 개념을 보면, 원론적인 동작 방식은 ~~해서 ~~이렇다.고 이해는 가지만, 그래서 이걸 언제? 어떻게 효율적으로 사용할 수 있는가?라는 질문이 계속해서 떠오른다.ㅠㅠㅠㅠㅠ그래서 일단, 공식 문서 Modal 예제를 통해 개념적인 내용만 구현해보고 추후 개인 프로젝트를 통해 고민해보아야 겠다.이거 실습하다가 잠깐 막혔는데, 혹시 참고하실 분들은 참고해보세요.문제 상황: slot 구성 후 intercept page를 Fragment 태그로 대충 감싸서 테스트용 페이지 만듬 -> Link로 해당 페이지..

11. Intercepting RoutesIntercepting Routes는 사용자의 Context 변화 없이 현재 레이아웃 안에서 Application에 존재하는 다른 부분으로의 route가 가능하도록 해줌.예를 들어, 피드 안에서 게시물을 클릭했을 때, /feed 라는 URL을 마스킹하고 /photh/123 URL로 Route를 시킬 수 있다. (Modal 구조)그러나, 공유된 URL 혹은 페이지 새로 고침 시 Modal이 나타나는 것이 아닌, photo에 대한 게시글이 전체 페이지에 로드되어야 하며 route interceptor가 발생하면 안된다 -> route interceptor 발생 (Modal open), 새로 고침 혹은 공유 URL (원래 의도된 페이지로 접근)(..)을 사용해서 정의할..

10. Parallel RoutesParallele Routes는 하나의 레이아웃에 여러 page를 조건부 혹은 동시에 렌더링할 수 있게 해주는 기능.10-1. SlotsParallele Route는 slots를 사용해 만들 수 있으며, @folderName 처럼 정의할 수 있다. 위 사진에선, analytics와 team slots를 만들었다.export default function Layout({ children, team, // slots analytics, // slots}: { children: React.ReactNode analytics: React.ReactNode team: React.ReactNode}) { return ( {children} ..

9. Dynamic Routes사전에 정확한 segment 명칭을 알 수 없거나, 동적 데이터를 활용해서 route를 생성하고자 할 때 buildTime에 prerendered 되거나 요청 시 동적으로 segment를 채워주는 Dynamic Routes를 사용할 수 있다.[folderName]과 같이 대괄호를 이용해 생성할 수 있으며, params prop 형태로 layout, page, route, generateMetadata function에 전달된다.9-1. Exampleexport default function Page({ params }: { params: { slug: string } }) { return My Post: {params.slug}}app/blog/[slug]/page.js ..

8. Project Organizationrouting folder and file Convention외에도 프로젝트를 구성하는 기본적인 방법들이 있다.8-1. 안전하게 Colocation. (폴더 위치에 두다?)app 폴더에서 중첩된 폴더 구조는 route 구조를 정의한다.각 폴더는 URL Path와 맵핑되는 route segment를 나타내지만, page.js or route.js 파일을 만들기 전까진 접근이 불가능하다.접근이 가능해진 후에 Client에는 page.js or route.js의 컨텐츠만 반환된다.즉, Project 내 파일들은 route에 영향을 주지 않고, 안전하게 각 세그먼트 경로에 포함될 수 있다. 1. 기존 page route 방식은 page 하위의 모든 경로에 위치한 파일들을..

7. Route GroupsNext.js 에서 폴더는 일반적으로 URL Path에 맵핑된다.Route Group을 사용하면 Route segment와 구조에 영향을 주지 않고 논리적인 그룹을 구성하여 URL Path 맵핑을 의도적으로 방지할 수 있다.() 괄호로 묶어 Route Group을 구성할 수 있다.7-1. URL Path에 영향이 없이 route를 구성할 수 있다.URL에 영향 없이 관련 route를 구성할 수 있다.같은 경로 구조를 공유하더라도, 각 그룹마다 다른 레이아웃 적용이 가능하다. 7-2. 특정 세그먼트에 레이아웃 적용URL 정보를 유지하면서 특정 세그먼트에게만 layout을 적용하고 싶을 때, Route Group을 활용하면 된다. 7-3. 멀티 Root Layout 구성.URL 정..

6. RedirectingNext.js에서 Redirct를 다룰 수 있는 몇 가지 방법이 있다.API사용 목적사용 위치Status CoderedirectMutation or event 발생 후 사용자 redirectServer Components, Server Actions, Route Handler307 or 303 (Server Action)permanentRedirectMutation or event 발생 후 사용자 redirectServer Components, Server Actions, Route Handler308 (Permanent)useRouterClient Side에서 Navigation 시 사용Client Coponent 내의 Event HandlerN/Aredirect in next..

5. Error Handlingerror.js file은 중첩된 Route 내에서 런타임 에러를 처리할 수 있다.1. 자동으로 Route와 중첩된 자식 컴포넌트들을 React ErrorBoundary Component로 감싼다.2. 파일 시스템 구조를 활용해 특정 segment에 맞는 Error UI 제공.3. 나머지 기능을 유지하며, 에러가 발생한 segment만 격리.4. 전체 페이지 새로고침 없이 Error 복구를 시도할 수 있다.'use client' // Error components must be Client Components import { useEffect } from 'react' export default function Error({ error, reset,}: { error:..

4. Loading UI and Streamingloading.js 파일은 React Suspense Component를 활용하여 Loading UI를 만들 수 있다. 즉각적으로 Loading UI를 보여주고(instant loading state), 로딩된 컨텐츠가 한 번의 렌더링 안에서 자동으로 스왑된다.4-1. Instant Loading State즉시 로딩 상태는 특정 Route에 Navigation해서 접근할 경우, 바로 Loading UI를 보여줄 수 있는 것을 의미.단, 렌더링 지연이 발생하지 않으면 Loading UI는 표시되지 않는다.layout file 내부에 Suspense Components와 함께 생성되고, page를 감싸는 형태로 자동으로 작성된다.1. Navigation은 즉각..