Next.js에서 layout.tsx와 template.tsx는 페이지 구조를 정의하는 데 사용되지만, 역할과 동작 방식이 다르다.

🍪 layout.tsx란?

layout.tsx는 페이지와 그 하위 경로에 공통적으로 적용되는 UI 구조를 정의하는 파일이다. 내비게이션 바, 푸터, 사이드바 등 모든 페이지에서 공유되는 정적 UI 요소를 포함한다.

주요 특징

• 상태 유지: 페이지 간 이동 시 리렌더링되지 않아, 내비게이션 메뉴의 열림/닫힘 상태나 스크롤 위치 등 컴포넌트 상태와 DOM이 유지된다. 이는 클라이언트 사이드 내비게이션의 성능을 최적화한다.
• 계층 구조: 상위 폴더의 layout.tsx는 하위 경로의 모든 페이지와 중첩 레이아웃에 공통적으로 적용된다.

⚠️ 주의할 점

layout.tsx에서는 pathname, route segments, searchParams와 같은 동적 URL 데이터에 접근할 수 없다. 이는 Next.js가 layout.tsx를 정적이고 재사용 가능한 UI 구조로 유지하기 위한 설계이다. URL이 변경될 때마다 레이아웃이 다시 렌더링되어야 하므로, 이는 Layout의 상태 유지성을 깨뜨리고, 불필요한 리렌더링으로 성능 저하를 초래할 수 있다.

내부적으로 Next.js는 부분 렌더링(Partial Rendering)을 통해 클라이언트 사이드 내비게이션 시 page.tsx와 같은 동적 콘텐츠만 업데이트하며, layout.tsx는 상태와 DOM을 유지한다.

🍪 template.tsx란?

template.tsx는 특정 경로의 페이지에만 적용되는 고유한 템플릿을 정의하는 파일이다. layout.tsx와 유사한 구조를 가지지만, 가장 큰 차이점은 페이지가 렌더링될 때마다 새롭게 인스턴스화되어 항상 초기화된 상태에서 시작된다는 점이다.

주요 특징

• 상태 초기화: 페이지 전환 시마다 새로운 컴포넌트 인스턴스가 생성되므로, 컴포넌트 상태와 훅(useState, useEffect 등)이 모두 초기화된다.
• 적용 범위 제한: layout.tsx와 달리 template.tsx는 해당 경로의 페이지에만 적용되며, 하위 경로에는 영향을 미치지 않는다.

그럼 언제 사용할까?

• 페이지 전환 애니메이션: 각 페이지가 새로 마운트되기 때문에, 진입 시마다 자연스럽게 애니메이션을 실행할 수 있다.
• 초기화가 필요한 로직: 폼 초기화, 일회성 효과 등 페이지 이동 시 상태 초기화가 필요한 경우 유용하다.
• SEO 메타데이터 안정성 확보: template.tsx를 통해 페이지 인스턴스를 초기화함으로써 캐시나 전역 상태로 인한 예외적인 SEO 누락 문제를 예방하는 데 도움을 줄 수 있다.

🍪 layout.tsx와 template.tsx의 차이점

이 둘의 차이점을 정리해보면 다음과 같다.

특징	layout.tsx	template.tsx
렌더링 방식	상태 및 DOM 유지, 다시 렌더링되지 않음	페이지 렌더링마다 새로 인스턴스화
사용 목적	공통 UI 구조 정의 (헤더, 푸터 등)	페이지별 고유 템플릿, 애니메이션 등
적용 범위	하위 모든 경로에 적용 (중첩 가능)	해당 경로의 페이지에만 적용
상태 유지	상태 유지	상태 초기화

🍪 결론

layout.tsx와 template.tsx는 Next.js App Router에서 페이지 구조를 효율적으로 관리하는 핵심 도구이다. layout.tsx는 공통 UI를 유지하며 성능을 최적화하는 데 적합하고, template.tsx는 페이지별 고유한 동작이나 애니메이션을 구현하는 데 유용하다. 프로젝트의 요구사항에 따라 두 파일을 조합하면 사용자 경험과 개발 생산성을 크게 향상시킬 수 있다.