Nextjs app router 사용시 multiple layout은 보통 어떻게 구성하시나요?

해당 질문은 흔히 말하는 케바케인 경우가 많아서 여러가지 방법을 쓰며 정답이 있지는 않습니다. 다만 저와 같은 경우 Next.js를 사용 시 레이아웃 파일에 해더를 작성해 놓습니다. 이후 필요한 페이지에서는 해당 해더를 표시하고 필요하지 않을 경우 표시하지 않습니다. 혹은 해더 정보를 미리 라우트 단에서 처리해서 해더를 보여주거나 보여주지 않는 방식도 가능합니다. 마지막으로 HOC (고차 컴포넌트)를 활용하여 특정 페이지는 a해더, 특정 페이지는 b해더 특정 페이지는 해더없음 등으로 표시하는 방법도 가능합니다.

1// withHeader.js (HOC)
2import React from 'react';
3import Layout from './Layout';
4
5const withHeader = (WrappedComponent, showHeader = true) => {
6  return props => (
7    <Layout showHeader={showHeader}>
8      <WrappedComponent {...props} />
9    </Layout>
10  );
11};
12
13export default withHeader;
14
15// Layout.js
16const Layout = ({ children, showHeader }) => (
17  <>
18    {showHeader && <Header />} // 조건부 렌더링을 통해 헤더 표시
19    {children}
20  </>
21);
22
23// 사용 예시
24import withHeader from './withHeader';
25
26const HomePage = () => (
27  // 홈 페이지 컨텐츠
28);
29
30export default withHeader(HomePage, true); // 해더가 있는 페이지
31
32const AboutPage = () => (
33  // 소개 페이지 컨텐츠
34);
35
36export default withHeader(AboutPage, false); // 해더가 없는 페이지

혹은 최근 저희 프로젝트에서 다른 분이 작성한 걸 본건데 이 방식도 유용해 보입니다. 이 방식을 사용하면, 페이지 설정을 한 곳에서 관리할 수 있고, 라우트 변경이나 새 페이지 추가 시 설정 파일만 업데이트하면 됩니다. 또한, 이런 구조는 애플리케이션의 라우팅과 관련된 설정을 명확하고 중앙집중적으로 관리할 수 있게 해, 큰 규모의 애플리케이션에서 특히 유용합니다. 간단하게 요약하기 위해 ChatGPT4의 코드를 가져왔습니다. 일부 부분은 수정하셔야 할 수도 있습니다.

1// 페이지 설정 파일 (pagesConfig.js)
2// 라우트와 관련된 설정을 담은 별도의 파일을 만듭니다. 이 파일은 각 페이지의 경로, 해더 표출 여부, 그리고 필요한 추가 메타데이터를 포함할 수 있습니다.
3
4// pagesConfig.js
5const pagesConfig = {
6  '/': {
7    showHeader: true,
8    title: '홈 페이지'
9  },
10  '/about': {
11    showHeader: false,
12    title: '소개 페이지'
13  },
14  // 추가 페이지 설정...
15};
16
17export default pagesConfig;
18
19// 레이아웃 컴포넌트 수정
20// 레이아웃 컴포넌트를 수정하여, 페이지 설정에 따라 해더의 표출 여부를 결정합니다.
21
22// components/Layout.js
23import React from 'react';
24import Header from './Header';
25import pagesConfig from '../pagesConfig';
26
27const Layout = ({ children, pathname }) => {
28  const currentPageConfig = pagesConfig[pathname];
29
30  return (
31    <div>
32      {currentPageConfig.showHeader && <Header />}
33      <main>{children}</main>
34    </div>
35  );
36};
37
38export default Layout;
39
40// _app.js 파일에서 설정 적용
41// Next.js의 커스텀 _app.js 파일에서 Layout 컴포넌트에 현재 페이지의 경로를 전달합니다.
42
43// pages/_app.js
44import Layout from '../components/Layout';
45import '../styles/globals.css';
46
47function MyApp({ Component, pageProps, router }) {
48  return (
49    <Layout pathname={router.pathname}>
50      <Component {...pageProps} />
51    </Layout>
52  );
53}
54
55export default MyApp;