Next.js / pages 라우팅 공통 레이아웃 & 개별 레이아웃 적용 방법

 

제미나이가 생성한 Next.js 이미지

 

Next.js pages 디렉토리 기반 라우팅에서는 App 컴포넌트를 사용해 전체 앱의 공통  레이아웃을 설정하고,

각 페이지에서 getLayout 패턴을 사용하여 개별 레이아웃을 지정할 수 있다.

 

전체 페이지에 공통 레이아웃 적용하기 

 

- Next.js는 pages 라우팅에서 pages/_app.js 파일을 통해 앱의 루트 컴포넌트를 정의한다.

  따라서 _app.js에서 원하는 공통 레이아웃(헤더, 푸터)을 감싸주면 모든 페이지에 자동 적용된다.

//components/Layout.js
 
export default function Layout({children}){
    return (
        <div>
            <header style={{ background: "#eee", padding: "10px" }}>
                <h1>공통 헤더</h1>
              </header>
 
            <main style={{ padding: "20px"}}>
                {children}
            </main>
 
            <footer style={{ background: "#eee", padding: "10px" }}>
                   <p>공통 푸터</p>
              </footer>
        </div>
    );
}
 
// 공통 레이아웃 적용
// pages/_app.js
 
import Layout from "../components/Layout";
 
export default function App({ Component, pageProps}){
    return (
        <Layout>
            <Component {...pageProps}/> 
    // 현재 요청된 URL에 해당하는 컴포넌트(Component)에 Next.js가 기본설정 Props 값 (/SSR/SSG)을 자동으로 뿌려준다.
        </Layout>
    );
}

 

 

특정 페이지에 개별 레이아웃 적용하는 방법

 

각 페이지 컴포넌트마다 getLayout이라는 함수를 정의하고, _app.js에서 이것을 감싸는 구조를 만든다.

// pages/_app.js
 
export default function App({Component, pageProps}) {
    // 페이지 컴포넌트에 getLayout이 있으면 사용하고, 없으면 기본 레이아웃으로 렌더링
    const getLayout = Component.getLayout || ((page)=> page);
 
    return getLayout(<Component {...pageProps} />);
}
 
// 개별 페이지에서 getLayout 정의 
 
//pages/dashboard.js
 
import DashboardLayout from "../components/DashboardLayout"
 
function DashboardPage(){
    return <h2>대시보드 페이지</h2>;
}
 
// 이 페이지만의 레이아웃 설정
DashboardPage.getLayout = function getLayout(page){
    return <DashboardLayout>{page}</DashboardLayout>;
};
 
export default DashboardPage;
 
// 개별 레이아웃 컴포넌트
 
// components/DashboardLayout.js
 
export default function DashboardLayout({children}){
    return (
           <div style={{ background: "#fafafa", padding: "20px" }}>
              <h1>대시보드 전용 레이아웃</h1>
                  {children}
        </div>
    );
}

 

이러한 방식으로 글로벌 레이아웃과 개별 레이아웃 모두 유연하게 구성할 수 있다.