반응형
Next.js 14 버전에서 도입된 App 라우팅 방식은 폴더 구조와 파일 규칙을 기반으로 강력하고 유연한 라우팅 경험을 제공합니다. 이 글에서는 폴더와 파일의 명칭에 대한 규칙을 명확하고 간결하게 정리하여 개발자들이 App 라우팅을 쉽게 이해하고 활용할 수 있도록 정리 했습니다.
라우팅(Routing) 파일들
APP 라우팅 방식은 기본적으로 컴포넌트를 기준으로 경로를 설정하게 됩니다. 기본적으로 사용되는 라우팅 파일 형식은 아래와 같습니다.
| 파일 명 | 확장자 | 설명 |
|---|---|---|
layout |
.js .jsx .tsx |
화면의 레이아웃을 정의 합니다. |
page |
.js .jsx .tsx |
화면의 컨텐츠를 정의 합니다. |
loading |
.js .jsx .tsx |
화면이 로딩될 때 보여줄 UI 화면입니다. |
not-found |
.js .jsx .tsx |
경로에 없는 화면을 요청할 경우 보여줄 UI 화면입니다. |
error |
.js .jsx .tsx |
로컬 오류가 발생했을 경우 보여줄 UI 화면입니다. |
global-error |
.js .jsx .tsx |
전역 오류가 발생했을 경우 보여줄 UI 화면입니다. |
route |
.js .ts |
API의 엔드포인트 입니다. |
template |
.js .jsx .tsx |
layout와 비슷한 역활을 하나, template은 화면에 접근할 때 마다 계속 리렌더링을 합니다. |
default |
.js .jsx .tsx |
패러랠 라우트의 대체 페이지로 사용됩니다. |
라우팅(Routing) 폴더들
이번에는 폴더를 사용한 라우팅 경로 설정 규칙을 살펴봅니다.
| 특징 구분 | 폴더명(형태) | 설명 |
|---|---|---|
| Nested Routes | folder |
기본 폴더가 경로 지정 |
| Nested Routes | folder/folder |
2개이상의 중첩된 경로 지정 |
| Dynamic Routes | [folder] |
변수에 따라 변경되는 동적 경로 지정 |
| Dynamic Routes | [...folder] |
포괄 경로 구간 |
| Dynamic Routes | [[...folder]] |
선택적 포괄 경로 구간 |
| Route Groups | (folder) |
주소 체계에 관여하지 않고 단지 그룹만 지어줌 그룹 단위로 레이아웃을 별도로 가져갈 수 있음 예시> (beforeLogin), (afterLogin) |
| Private Folders | _folder |
주소 체계에 관여하지 않고 폴더 정리용으로 주로 사용됨 폴더명 앞에 _언더바를 붙힘 _components로 주로 사용함 |
| Parallel | @folder |
주소 체계에 관여하지 않고 동시에 2개이상의 화면을 사용할 수 있음. 슬롯 이라고 함. 모두 같은 폴더 위치에 있어야 함. 보통 layout.js에서 2개이상의 화면을 적용함 주로 인터셉트와 함께 모달창 생성시 사용함 |
| Intercepted Routes | (.)folder |
같은 레벨의 화면을 가로챔. 주로 패러렐과 함께 모달창 생성시 사용함 |
| Intercepted Routes | (..)folder |
한 레벨 위에서 화면을 가로 챔 |
| Intercepted Routes | (..)(..)folder |
두 레벨 위에서 화면을 가로 챔 |
| Intercepted Routes | (...)folder |
루트 위치에서 화면을 가로 챔 |
기타 메타데이터 파일들
아래 파일명으로 메타데이터 콘텐츠를 설정하면 자동으로 최적화된 메타데이터가 적용됩니다.
앱 아이콘
Next.js에서 앱 아이콘을 다양한 크기로 자동으로 생성해 줍니다.
| 파일 명 | 확장자 | 설명 |
|---|---|---|
favicon |
.ico |
파비콘 파일 |
icon |
.ico .jpg .jpeg .png .svg |
앱 아이콘 파일 |
icon |
.js .ts .tsx |
생성된 앱 아이콘 |
apple-icon |
.jpg .jpeg,.png |
Apple 앱 아이콘 파일 |
apple-icon |
.js .ts .tsx |
생성된 Apple 앱 아이콘 |
오픈 그래프 및 트위터 이미지
오픈 그래프는 웹 페이지를 소셜 미디어에서 공유할 때 미리보기 이미지를 설정하는 데 사용됩니다. Open Graph 프로토콜을 사용하여 Facebook, Twitter, LinkedIn 등 다양한 플랫폼에서 일관된 미리보기 이미지를 표시할 수 있습니다. Next.js에서는 여러가지 방법으로 사용되며 기본적으로는 아래처럼 메타데이터 형식으로 많이 사용합니다.
<!-- 일반적인 사용법 --> <meta property="og:title" content="미리보기 제목" /> <meta property="og:type" content="미리보기 내용" /> <meta property="og:url" content="경로 주소" /> <meta property="og:image" content="이미지 주소" /> <!-- Next.js에서 자동으로 삽입 --> <meta property="og:image" content="opengraph-image.jpg" /> <meta name="twitter:image" content="twitter-image.jpg" /> | 파일 명 | 확장자 | 설명 |
|---|---|---|
opengraph-image |
.jpg .jpeg .png .gif |
그래프 이미지 파일 열기 |
opengraph-image |
.js .ts .tsx |
생성된 오픈 그래프 이미지 |
twitter-image |
.jpg .jpeg .png .gif |
트위터 이미지 파일 |
twitter-image |
.js .ts .tsx |
생성된 트위터 이미지 |
SEO
SEO는 검색엔진 최적화를 효과적으로 수행할 수 있도록 지원해 줍니다.
| 파일 명 | 확장자 | 설명 |
|---|---|---|
sitemap |
.xml |
사이트맵 파일 |
sitemap |
.js .ts |
생성된 사이트맵 |
robots |
.txt |
로봇 파일 |
robots |
.js .ts |
생성된 로봇 파일 |
