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은 즉각..

3. Linking and NavigatingNext.js에서 route 간 네비게이션 방법에는 4가지가 존재.1. 2. useRouter hook (Client Components)3. redirect function (Client Components) 4. History API3-1. Link ComponentHTML 태그를 확장한 내장 컴포넌트로 prefetching과 client-side에서 route 간 네비게이션 기능 제공.prefetching: 사용자가 방문하기 전에 background에서 해당 페이지의 정적 데이터 (JS, CSS 등)를 미리 로드하는 것.1. Link Component: 컴포넌트가 사용자 ViewPort 내 들어오면, prefetching 수행.2. router.pref..

Next.js를 실무에서 사용했는데 제품 특성 상 버전업이 쉽지 않아 계속 12버전만 사용해왔다. 13버전 부터 바뀌거나 추가된 내용이 많고, 15버전 까지 나와서 관련 내용을 공식 문서를 활용해 학습할까 한다. 굳이 14버전을 고른 이유는 가장 최신 버전은 안정화되지 않은 경우가 많고 13, 14, 15 중 13버전 부터 많은 변경사항이 생겼기 때문에 최신 버전에서 한 단계 낮은 14버전을 포트폴리오 프로젝트에 학습하며 적용해보기로 했다. 1. Routing1-1. 구조URL구조는 Segment와 Path로 나뉜다.1. Segment: /로 구분되는 부분.2. Path: Segment의 집합.폴더 구조는 아래와 같이 구분한다.1-2. app routerNext 13이후로는 Server Component..