Next.js 13 기초
1.Next.js App Router에 대해 알아보자(2. 라우팅 정의하기)
Next.js는 파일 시스템 기반에 라우팅을 제공합니다. 각 폴더는 라우터에 세그먼트를 대표합니다.각각의 폴더에는 page.tsx가 존재해야 해당 URL에 접근이 가능합니다. 일반적으로 UI를 표시하는 페이지와 여러 경로에서 공유되는 UI를 표시하는 레이아웃으로 페이지
2.Next.js App Router에 대해 알아보자(1. 개요)
Next.js에서 나온 애플리케이션의 뼈대는 라우팅입니다. 따라서 라우팅에 대해 반드시 이해해야 한다. 용어 정리 라우터 용어를 정리해봅시다. > tree: 부모 - 자식의 계층 관계로 폴더 구조를 생각하면 쉽다. subtree: 트리에 새로운 부분으로 루트와 리프
3.Next.js App Router에 대해 알아보자(3. 페이지와 레이아웃)
페이지 경로에 대한 고유 UI입니다. page.tsx에서 만듭니다. 페이지에 대해 다음 사실을 알면 도움이 됩니다. > 페이지는 모든 라우터 서브트리에 리프노드입니다. 페이지는 기본적으로 서버 컴포넌트로 구성되지만 클라이언트 컴포넌트로도 사용이 가능합니다. 페이지는
4.Next.js App Router에 대해 알아보자(4. 링크와 네비게이션)
1. Link next.js에서 재공하는 내장 컴포넌트로 a태그처럼 동작합니다. 프리 패치를 제공하고 라우터 간 클라이언트 사이드 네비게이션을 지원합니다. Next.js에서 라우트 간 이동은 Link로 한다고 생각하면 편합니다. href속성은 필수로 넣어주어야 합니다
5.5.Next.js App Router에 대해 알아보자(5. 라우트 그룹 사용하기)
app 디렉토리는 일반적으로 URL 경로에 따라서 폴더들이 계층을 가지고 있습니다. 하지만 개발자가 특정 폴더를 라우트 그룹이라고 표시를 하면 특정 폴더를 라우트 URL 패스에 포함되지 않도록 막을 수 있습니다. 이것을 사용하면 URL 경로 구조에 영향을 주지 않고
6.5.Next.js App Router에 대해 알아보자(6. 다이나믹 라우트 사용하기)
next.js는 동적으로 라우팅을 해야 되는 경우(ex. 상품 상세 정보, 마케팅 상세 정보)도 자체적으로 지원합니다. 이 경우 요청하는 시점이나 빌드되는 시점에 페이지가 만들어집니다. 사용법 [id]와 같은 형태로 사용해주면 됩니다. id는 세그먼트로 layout,