Page Router 설정

App Router 버전의 Next 앱에서도 앱 폴더 밑에 구조를 기반으로 페이지 라우팅이 자동 설정된다는 점이 있습니다.
대신에 App Router에서는 page라는 이름을 갖는 파일만 페이지 파일로써 설정이 됩니다.

Layout 설정

레이아웃도 Page Router랑 마찬가지로 layout.tsx라는 파일을 새롭게 생성하면 자동으로 설정이 되게 됩니다.

layout이라는 이름의 파일을 만들게 되면 폴더안에 있는 모든 페이지의 레이아웃으로 자동으로 적용이 됩니다.

예를 들어 search 폴더 안에 setting이라는 폴더를 만들고 page.tsx를 만든다면 setting/page.tsx에서도 레이아웃이 자동으로 적용이 된다는 점입니다.

즉, layout 파일을 만들게 되면 폴더 안에 있는 모든 페이지 컴포넌트에 다 똑같이 적용이 되는 레이아웃을 정의하게 되는 것입니다.

그렇다면 setting/layout.tsx를 만들면 어떻게 될까?
중첩이 됩니다. 기존의 layout이 적용이 된 다음 setting/layout.tsx가 중첩으로 적용이 됩니다.

아주쉽게 중첩된 레이아웃을 구현할 수 있다는 장점이 존재합니다.

어떻게 적용시킬까?
layout을 전달할 때에는 반드시 children이라는 props를 통해서 페이지 컴포넌트를 전달 받아서 return 문 안에 어디에다가 렌더링 할 건지 직접 배치를 시켜줘야 합니다.
예로

import { ReactNode } from "react";

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <div>
      <div>임시 서치바</div>
      {children}
    </div>
  );
}

원하는 컴포넌트에서만 적용시키기

만약 원하는 컴포넌트들에서만 적용시키는 방법이 있으면 편리할 거 같은데 방법이 있을까?
이럴때에는 엠라우터 버전의 새로운 기능은 라우트 그룹이라는 것을 사용하면 됩니다.
예를들어
먼저 app 폴더 밑에 (with-sarchbar) 폴더를 만들어 줍니다. 이를 RouteGroup 이라고 부릅니다. RouteGroup는 경로상에는 아무런 영향을 미치지 않는 폴더를 의미합니다.
즉, 더 이상 경로에 어떠한 영향도 미치지 않는 폴더가 되는 것입니다.
search 폴더를 아예 통째로 RouteGroup 폴더로 옮긴다면 아무런 경로에 영향을 미치지 않으면서 레이아웃만 동일하게 적용을 할 수 있습니다.