Next.js 14버전에서 App 라우팅 심화: 폴더 구조와 파일 특징 완벽 가이드

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	생성된 로봇 파일