[Next.js] 확장성 높은 Layout 컴포넌트 구축하기

_app.js

import Layout from "../components/Layout"

export default function App({ Component, pageProps }) {
 const getLayout = Component.getLayout || ((page) => <Layout>{ page }</Layout>)
    
 return getLayout(<Component {...pageProps} />)
}

• Component 는 페이지를 의미한다.
• 따라서, 페이지가 getLayout 을 가지고 있다면 그것을 보여주고, 가지고 있지 않다면 다른 구조를 보여주도록 조건을 주면 된다.

 

[ 페이지 ]

csr.js

import Layout from '../components/Layout'
import SubLayout from '../components/SubLayout'

export default function CSR() {
 return (
  <h1>title</h1>
 )
}

CSR.getLayout = function getLayout(page) {
 return (
  <Layout>
   <SubLayout>{page}</SubLayout>
  </Layout>
 )
}

 

ssr.js

import Layout from '../components/Layout'
import SubLayout from '../components/SubLayout'

export default function SSR() {
 return (
  <h1>title</h1>
 )
}

SSR.getLayout = function getLayout(page) {
 return (
  <Layout>
   <SubLayout>{page}</SubLayout>
  </Layout>
 )
}

 

 

이런 식으로 확장성 높은 Layout 을 구축할 수 있다.