I. App Router In version 13, Next.js introduced a newApp Routerbuilt onReact Server Components, which supports shared layouts, nested routing, loading states, error handling, and more. 앱 라우터는 Next.js 13버전에서 소개가 되었다고 하네요, 기본적으로 아래 이미지를 참고해서 앞으로 사용할 앱 라우터에 대한 기본 용어와 개념을 익혀야겠군요
※ Next.js는 기본적으로 SSR(Server Side Rendering, 서버측 렌더링) 방식으로 우리가 만들 앱을 렌더링합니다.
※ 렌더링(Rendering)이란, 자바스크립트나 타입스크립트 코드를 HTML로 변환하여 브라우저에게 제공하는 것을 말합니다.
routing tree
url path and segmentroles of folders and files
* 폴더는 (중첩된)경로를 정의하고, 파일은 라우트 세그먼트상 UI를 보여주는데 사용하는 특별한 컨벤션들이 있습니다.
special files
실습에서는 layout, page, not-found 에 대해서 먼저 살펴보겠습니다.
- App Router 실습
/about-me 라우팅
(1) app 폴더 내부에 about-me 폴더를 생성합니다.
(2) about-me 폴더 내부에 page.tsx (또는 page.jsx) 파일을 생성합니다. 필수사항!
(3) page.tsx에 렌더링할 내용을 export 합니다.
export default function AboutMe() {
return(<h1>About Me</h1>);
}
(4) 개발서버(http://localhost:3000)가 자동으로 재시작되고 UI가 렌더링 됩니다. 그러면 URL이 어떻게 되나요? http://localhost:3000/about-me 로 접근할 수 있게 됩니다.
(5) 조금 더 나아가서 이번에는 http://localhost:3000/about-me/license로 접근해보겠습니다. 그러면, 다시한번 app 폴더 내부에 URL path를 참고해서 폴더와 파일(page.tsx)를 생성하면 됩니다. 다음, 이미지를 참고해보세요.
license 페이지로 접근
위 이미지에 있듯이 greeting 이라는 폴더를 생성했으나, 내부에 page.tsx가 없다면 어떻게 되는지 살펴보세요
greeting 페이지는 렌더링 되지 않음
App Router는 URL path 방식으로 subtree와 page.tsx로 라우팅을 제공한다 (page.tsx or .jsx가 없다면 url segment일뿐, 렌더링되지 않습니다)
URL path와 Route Segment를 다시한번 확인해보죠
이번에는 앞서 page.tsx가 없는 URL segment에 대한 조치로 not-found 라는 파일을 생성해서 특별하게 404 에러처리를 한번 해보겠습니다.
위치가 중요한데 실습에서는 app 폴더 내부에 생성해주도록 하죠, 그러면 모든 URL path에서 하위에 UI(page.tsx)가 없을경우 렌더링을 담당하게 되죠
(1) app 폴더에서 not-found.tsx 파일을 생성하빈다
(2) 렌더링할 내용을 작성하고 내보내기 합니다.
(3) 개발 서버가 재시작되면, 이전에 접근했던 URL (http://localhost:3000/about-me/greeting)을 확인해보세요
not-found URL
이제 special file에서 공통 UI (share UI) - 예를들어 내비게이션의 경우 모든 페이지에 일관되게 존재해야 하죠? - 를 만들어보겠습니다.
만약 layout.tsx가 없다면, 우리는 각 컴포넌트(Component)마다 공통된 UI를 표현하기 위한 코드를 매번 복사&붙이기 해야할 수도 있는데, 이러한 점에서는 layout.tsx가 모든 하위 컴포넌트에 공통된 UI를 렌더링 해준다는것은 굉장한 메리트가 있는걸로 이해할 수 있겠습니다.
