📗라우팅
레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 구성 요소 위에 구축된 파일 시스템 기반 라우터입니다.
Next.js 13버전 이후부터는 App Router라는 것이 생겼습니다.
📗App Router란?
App Router는 새로운 app 디렉토리에서 작동합니다. app 디렉토리는 기존 pages 디렉토리와 병렬로 작동하여 점진적인 적용을 가능하게 합니다. 이를 통해 애플리케이션이 일부 라우트를 새로운 동작으로 전환하면서 기존 동작을 유지하기 위해 pages 디렉토리를 계속 사용할 수 있습니다.
App Router는 Page Router보다 우선합니다. 서로 다른 디렉토리에 있는 라우트가 동일한 URL 경로로 해석되어서는 안되며, 이렇게 되면 충돌을 방지하기 위해서는 빌드 시간에 에러가 발생합니다.
기본적으로, app 내부의 컴포넌트들은 React 서버 컴포넌트입니다. 이는 성능 최적화의 일환이며, 이를 쉽게 적용할 수 있게 해줍니다. 또한 클라이언트 컴포넌트를 사용할 수도 있습니다.
라우트 세그먼트
먼저 세그먼트(Segment)란 슬래시(/)로 구분된 URL 경로의 일부를 뜻합니다.
app 디렉토리 내에서, 폴더들은 루트를 정의하기 위해 사용됩니다.
라우트의 각 폴더는 라우트 세그먼트를 나타냅니다. 각 라우트 세그먼트는 URL 경로의 해당 세그먼트에 매핑됩니다.
중첩 루트를 생성하기 위해서는, 각각 폴더 안에 다른 폴더들을 중첩시킬 수 있습니다. 아래의 그림과 같이 app 디렉토리 안에 'dashboard' 폴더와 'settings' 폴더 두 개의 폴더를 중첩하여 새로운 /dashboard/settings/ 라우트를 만들 수 있습니다.
여기서 dashboard는 루트(Root)이고 settings는 잎(Leaf)입니다.
- 루트(Root)는 트리나 서브트리의 첫 번째 노드로 즉, 루트 레이아웃
- 잎(Leaf)는 자식이 없는 서브트리의 노드로 즉, URL 경로의 마지막 세그먼트
- 서브트리(Subtee)는 트리의 일부이며, 새로운 루트(첫 번째)에서 시작하여 마지막 잎까지 이어짐
🔥App Router 적용하기
Next.js의 자동 라우팅
url로 페이지 나누는 것을 라우팅이라고 합니다. 라우팅을 하려면 일반적인 웹서버들은 원하는 url로 접속하면 해당하는 html을 보여주는 식으로 서버에 코드를 작성해야 하는데 Next.js를 사용하면 그런 코드를 작성할 필요가 없이 폴더와 파일 하나만 만들면 자동으로 됩니다.
자동 라우팅 방법
1. app 폴더 안에 url 경로로 사용할 폴더 생성
2. 만든 폴더 안에 page.js 파일 만들어서 보여줄 html 작성
위 사진과 같이 app 폴더 안에 list 폴더를 만들고 그 안에 page.js 파일을 생성 후 html을 작성하면 아래 사진과 같이 /list url에서 작성한 html을 보여줍니다.
📗Link
<Link>은 HTML <a> 요소를 확장하여 프리페치 및 사이의 클라이언트 측 탐색을 제공하는 React 구성 요소입니다. 경로. 이는 Next.js에서 경로 간을 탐색하는 기본 방법입니다.
Link를 사용하고 싶으면 그림과 같이 상단에 import 해주면 사용할 수 있습니다.
가져다가 사용할 때는 href에 이동시킬 페이지의 url을 작성하면 해당 페이지로 이동시킬 수 있습니다.
