[Nextjs] Layout, Route Group, Metadata, Dynamic Routes

1.  Layout 시스템

Layout은 우리가 페이지를 만들 때 반복적으로 사용되는 UI 요소(예: 네비게이션 바, 푸터 등)를 재사용할 수 있게 해줌.
App Router 기반 프로젝트에서는 페이지가 렌더링될 때 다음과 같이 중첩 구조로 layout이 구성됨:

Root Layout → 상위 Layout → 페이지 콘텐츠

특징

• Layout은 서로를 대체하지 않고 중첩됨.
• 프레임워크는 현재 페이지에 가장 가까운 Layout부터 적용하려고 시도.
• 페이지가 이동되어도 공통 레이아웃은 유지되고, 콘텐츠 영역만 바뀌므로 전환 속도와 사용자 경험이 향상.

---

2. Route Groups

Route Groups는 URL 구조에 영향을 주지 않으면서 내부적으로 라우팅을 그룹화할 수 있게 해주는 기능.

📌 사용 목적

• Layout을 공유하지 않고 분리할 수 있게 해줌.
• 중첩된 Layout을 원하지 않을 때 유용함.
• 디렉토리명 앞뒤에 괄호를 써서 사용함.
  예: (auth)/login, (auth)/signup

// 예시 구조
app/
  (auth)/
    login/
    signup/
  dashboard/

 

• 위 구조에서 (auth) 디렉토리는 URL에 노출되지 않지만 내부적으로는 라우트 그룹을 만들어줌.

---

 3. Metadata

 

• metadata는 반드시 object 형식으로 내보내야(export) 하며, 정적 메타 정보를 포함
• 페이지와 레이아웃에서만 정의할 수 있으며, 컴포넌트에서는 사용할 수 없음
• 클라이언트 컴포넌트가 아닌 서버 컴포넌트에서만 정의할 수 있음
• metadata는 중첩이 가능하지만 실제로는 병합됨

 

 

❓metadata는 중첩된다?

layout.tsx와 page.tsx 양쪽에서 metadata를 정의하면,
중첩된 layout을 따라 메타데이터도 병합(merge) 됨

// layout.tsx
export const metadata = {
  description: "The best movies on the best framework",
};

// page.tsx
export const metadata = {
  title: "Home | Next Movies",
};

이 경우:

• title → page.tsx의 title 사용
• description → layout.tsx의 description 사용

⚠️ 중첩되지만 겹치는 키는 오버라이딩됨

 

📑 템플릿 기능

title은 단순 텍스트가 아니라 object 형태로 template을 구성할 수 있음

✅ 작동 방식

• Home → Home | NextMovies로 출력됨
• title이 아예 없다면 → default: "Loading..." 사용

📌  %s 자리에 페이지별 지정한 title이 삽입되어 자동으로 병합됨

• title을 명시하지 않은 경우 default가 출력됨

---

4. Dynamic Routes

Dynamic Routes 파일구조

Next.js에서는 동적 라우팅을 지원합니다. 예를 들어 /movies/123와 같은 주소를 처리할 때, 폴더명을 다음과 같이 지정함:

app/
  movies/
    [id]/
      page.tsx

 

• [id]는 URL의 변수로 인식되며, 어떤 값이 들어와도 해당 페이지를 렌더링함
• params.id를 통해 해당 값을 받아올 수 있음

동적 경로 데이터 필요할때

❓ 동적 경로 데이터가 필요하다면?

페이지 컴포넌트에서 아래와 같이 params를 받아올 수 있음

export default function MovieDetail({ params }: { params: { id: string } }) {
  return <h1>Movie ID: {params.id}</h1>;
}

params는 Next.js가 페이지 렌더링 시 자동으로 넘겨주는 객체이며, [id]에 해당하는 값을 포함함

---

마무리 요약

항목	핵심 요약
Layout	중첩 가능, 재사용되는 UI 래핑 용도
Route Groups	URL에는 표시되지 않지만 레이아웃 구분용 그룹
Metadata	SEO 및 head 정보, 병합 가능, 서버 컴포넌트에서만 가능
Dynamic Route	[id] 형태로 동적 라우팅, params로 데이터 접근