React - Next.js 에서 공통 레이아웃 _app.js 사용하기.

헤더나 푸터와 같이, 프로젝트에 전체에서 공동으로 쓰이는 레이아웃들이 있을 것이다. 

실제 프로젝트를 진행하다보면, 헤더, 푸터뿐 아니라, 여러가지 도구들 (전체를 감싸는 로딩 block 이라던지, Alert Modal 이라던지)을 공통으로 쓸 텐데, 이것들은 앱이 최초 한번만 로드되길 바란다.

create-react-app 으로 프로젝트를 만들면, 당연히 App 컴포넌트에 한번 정의해놓으면 될것이고,

Next.js 프로젝트를 한다면

_app.js 를 사용하면 되겠다.

뿐만아니라, 전체 페이지의 getInitialProps 를 후킹할 수 도 있다.

/pages/_app.js 

import React from 'react'

import App, { Container } from 'next/app'

import {Header, Footer} from '../comps/CommonComps';

export default class MyApp extends App {

constructor(props){

super(props)

console.warn("마이앱의 컨스트럭터.", props)

}

componentDidMount() {

console.warn("마이앱의 컴포넌트 디드 마운트.")

}

static async getInitialProps({ Component, router, ctx }) {

console.warn("마이앱의 겟 이니셜.", router)

let pageProps = {}

if (Component.getInitialProps) {

pageProps = await Component.getInitialProps(ctx)

}

console.warn("받은 props.", pageProps)

return { pageProps }

}

render () {

const { Component, pageProps } = this.props

return (

<Container>

<Header /> // 공통된 레이아웃을 여기다 넣을 수 있다. 헤더라던지...

<Component {...pageProps} />

<Footer /> // 공통된 레이아웃을 여기다 넣을 수 있다. 푸터라던지...

</Container>

)

}

}