공통 경로가 있는 경우

레이아웃이 필요한 페이지와 같은 폴더 디렉토리에 layout.tsx 파일을 생성한다.

이 하위에 생성된 모든 페이지는 공통적으로 해당 레이아웃을 가지게 된다.

//layout.tsx

export default function Layout({ children }: {children: ReactNode}) {

	return (
		<div>
			<div>레이아웃</div>
			{children}
		</div>
	)
}

공통 경로가 없는 경우

해당 레이아웃을 필요로하는 모든 경로 폴더를 소괄호로 감싼 폴더에 넣는다.

src/
├── pages/
│   ├── Home/
│   │   └── index.tsx
│   └── (common-layout)/ // 폴더명 주목
│       ├── layout.tsx  //이제부터 이 레이아웃이 하위 페이지들에 공통으로 적용된다.
│       ├── page.tsx
│       └── item/
│            └── page.tsx 
...