NEXT Routing Concepts

Next 공식 문서에 기재된 Routing 개념을 정리한다.Routing IntroDefining RoutesPages and LayoutsLinking and NavigatingRoute GroupsDynamic RoutesLoading UI and Streaming

Next 공식 문서에 기재된 Special file conventions(https://nextjs.org/docs/app/building-your-application/routing접근 가능한 Segment를 생성하기 위한 방법을 설명한다.앞선 시리즈의 글

Next 공식 문서에 기재된page(https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts앞선 시리즈의 글 외에도 다음 내용에 대한 이해가 있다면 좋다.Next Render

Next 공식 문서(https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating\`컴포넌트와useRouter\` 훅을 활용하여원하는 Route Tree의 Segment에

Next 공식 문서의 내용에 따라Routing Group을 설정하는 방법을 알아보자.SEO를 위해 서로 다른 페이지에 metadata를 별도로 설정하고 싶을 수 있다.이 경우, Multiple root layout(https://nextjs.org/docs/a

Next 공식 문서의 내용에 따라가변적인 URL에 대한 Routing 규칙을 정의한다.Dynamic Routing은 두 종류의 시점에서 동작한다.build 시점에 static에 사용할 segment를 받아올 수 있다.Generating Static Params(http

Next 공식 문서의 내용에 따라request 시점에 server에서 이루어지는 data fetch 결과를 반영한 prerender를 onDemand 방식으로 로딩할 수 있도록 지원하고, 그 과정에서의 지연 시간에 보여줄 fallback component를 정의하는 방

Next 공식 문서의 내용에 따라Routing 간 발생하는 Error를 처리하는 방법을 소개한다.기존 React의 class component에서 ErrorBoundary(https://react.dev/reference/react/Componentrender

목표 Next 공식 문서의 내용에 따라 하나의 Layout에 다양한 페이지를 병렬적으로 위치시키는 방법을 소개한다. 내용 서론 동시 또는 조건적으로 하나 이상의 페이지를 단일 레이아웃에 렌더링 할 수 있다. 단일 페이지에 상태 변화가 매우 밀집된 경우 유용하게

Next 공식 문서의 내용에 따라기존 구조에 대한 변경 없이 segment를 재사용하는 방법을 소개한다.segment A에 대한 정의를 마쳤는데,공교롭게도 segment B에서 A의 극히 일부를 참조할 필요가 생겼다고 해보자.Component 수준의 참조라면 code

Next 공식 문서의 내용에 따라특정 segment에서의 Routing 규칙을 정의할 수 있다.Route Handler는 주어진 경로에 대해 웹 API에 대한 요청과 응답을 처리하는 custom handler이다. 이 기능은 App Router 방식에서만 지원한다.ro