[Next.js] _app.js에 대해서

Next.js에서 _app.js는 초기에 기본 페이지들의 component로 사용된다. 당신은 _app.js를 페이지들에서 사용하거나 무시할 수 있다.
_app.js의 기능들은 아래와 같다.

• 페이지들이 변화할 때 layout을 유지
• 페이지를 navigating 할 때 state(상태) 유지
• componentDidCatch로 고객들의 에러 관리
• 페이지들에 추가데이터 사용가능 (예를 들어 전달되는 GraphQL queries)

예시 코드는 아래와 같다

import React from 'react'
import App from 'next/app'

class MyApp extends App {
  // Only uncomment this method if you have blocking data requirements for
  // every single page in your application. This disables the ability to
  // perform automatic static optimization, causing every page in your app to
  // be server-side rendered.
  //
  // static async getInitialProps(appContext) {
  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
  //   const appProps = await App.getInitialProps(appContext);
  //
  //   return { ...appProps }
  // }

  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}

export default MyApp

layout 기능으로 사용예시

import React from 'react'
import App from 'next/app'

class Layout extends React.Component {
  render () {
    const { children } = this.props
    return <div className='layout'>{children}</div>
  }
}

export default class MyApp extends App {
  render () {
    const { Component, pageProps } = this.props
    return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
    )
  }
}

componentdidcatch로 사용예시

import App from 'next/app'

export default class MyApp extends App {
  componentDidCatch (error, errorInfo) {
    console.log('CUSTOM ERROR HANDLING', error)
    // This is needed to render errors correctly in development / production
    super.componentDidCatch(error, errorInfo)
  }
}

참고
https://nextjs.org/docs
https://salgum1114.github.io/nextjs/2019-05-21-nextjs-static-website-3/