Multiple children layout in Nextjs

Nextjs에서는 layout이라는 기능을 제공합니다.
페이지마다 공통되는 부분이 많은데 Layout을 이용하여서 재사용이 가능하게 하고 사용된 컴포넌트의 state가 유지되는 장점이 있습니다.

여기서 페이지의 왼쪽은 계속 공통된 부분(예시로 사이드 메뉴바)를 보여주고 왼쪽(예시로 메인 컨텐츠)은 링크마다 다른 페이지를 보여줘야하는 경우가 layout을 대표적으로 사용될 수 있습니다.

//pages/something.tsx

export const Something = () => {
	return ...;
}


Something.getLayout = function getLayout(page: ReactElement) {
  return <ExampleLayout>{page}</ExampleLayout>;
};

만약에 메뉴부분과 메인 컨텐츠부분의 보여주는 부분이 계속 달라질 경우 조금 복잡해질 수 있습니다.

메뉴부분에도 children을 전달하고 컨텐츠부분에도 children을 전달해야 할 것 같습니다.

그래서 multiple children을 전달하는 아래 코드처럼 작성할 수 있습니다.

const LobbyLayout = ({ children }: any) => {
	...
	return children
}

const LeftLayout = ({ children }: any) => {
  ...some conditonal code


  return (
    <LeftContainer>
     {children}
    </LeftContainer>
  );
};
const RightLayout = ({ children }: any) => {
  return <RightContainer>{children}</RightContainer>;
}

LobbyLayout.LeftLayout = LeftLayout;
LobbyLayout.RightLayout = RightLayout;

export default LobbyLayout;

사용 예시

<LobbyLayout.LeftLayout>
    <DynamiceComponentLeft />
</LobbyLayout.LeftLayout>
<LobbyLayout.RightLayout>
	{conditonal ? <MainWelcomeContent /> : <MainContent />}
</LobbyLayout.RightLayout>