Custom ` App ` - team-wedev/wedev GitHub Wiki

Custom <App>

Next.js๋Š” App component๋ฅผ ํŽ˜์ด์ง€๋ฅผ ์ดˆ๊ธฐํ™” ํ•˜๋Š”๋ฐ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๋Š” ์ด๋ฅผ ์˜ค๋ฒ„๋ผ์ด๋“œ ํ•  ์ˆ˜ ์žˆ๊ณ  ๋˜ํ•œ ํŽ˜์ด์ง€ ์ดˆ๊ธฐํ™” ๊ณผ์ •์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์— ๋ช…์‹œ๋œ ๊ฒƒ๋“ค์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.

  • ํŽ˜์ด์ง€ ๋ณ€ํ™”์‚ฌ์ด์˜ layout์„ ์ง€์†ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ํŽ˜์ด์ง€๋ฅผ ๋„ค๋น„๊ฒŒ์ดํŒ…ํ•˜๋Š” ๋™์•ˆ state๋ฅผ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • componentDidCatch๋ฅผ ์ด์šฉํ•˜์—ฌ ์ปค์Šคํ…€ ์—๋Ÿฌ ํ•ธ๋“ค๋ง์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
  • ํŽ˜์ด์ง€์— ์ถ”๊ฐ€์ ์ธ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ์ž…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (for example by processing GraphQL queries)

์˜ค๋ฒ„๋ผ์ด๋“œ ํ•˜๊ธฐ ์œ„ํ•ด์„ , ./pages/_app.js ํŒŒ์ผ์„ ๋งŒ๋“ค๊ณ , ์•„๋ž˜์™€ ๊ฐ™์ด App class ๋ฅผ ์˜ค๋ฒ„๋ผ์ด๋“œ ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

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

Note: ์ปค์Šคํ…€ getInitialProps๋ฅผ App ์— ์ถ”๊ฐ€ํ•˜๋ฉด Automatic Static Optimization์ด ๋™์ž‘ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

Automatic Static Optimization

Next.js๋Š” ์ž๋™์œผ๋กœ ํ•ด๋‹น ํŽ˜์ด์ง€๊ฐ€ blocking data๊ฐ€ ํ•„์š”๋กœ ํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ์ž๋™์ ์œผ๋กœ ํŽ˜์ด์ง€๋ฅผ prerenderํ•ฉ๋‹ˆ๋‹ค. ์ด ์—ฌ๋ถ€๋Š” ํ•ด๋‹น ํŽ˜์ด์ง€ ๋‚ด์— getInitialProps์˜ ์—ฌ๋ถ€๋กœ ํŒ๋‹จํ•ฉ๋‹ˆ๋‹ค.

getInitialProps ๊ฐ€ ์กด์žฌํ•˜๋ฉด, Next.js ๋Š” ํ•ด๋‹น ํŽ˜์ด์ง€๋ฅผ ์ •์ ์œผ๋กœ ์ตœ์ ํ™”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€์‹ ์— Next.js ๋Š” ๊ธฐ๋ณธ ๋™์ž‘์„ ์‚ฌ์šฉํ•˜์—ฌ ์š”์ฒญ์— ๋”ฐ๋ผ ์š”์ฒญ์‹œ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.(์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.)

getInitialProps ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์œผ๋ฉด, Next.js๊ฐ€ ์ž๋™์ ์œผ๋กœ ์ •์ ์ธ html์„ prerenderingํ•จ์œผ๋กœ์จ ํŽ˜์ด์ง€๋ฅผ ์ •์ ์œผ๋กœ ์ตœ์ ํ™”ํ•ฉ๋‹ˆ๋‹ค. prerendering ํ•˜๋Š” ๋™์•ˆ์—๋Š” ์ œ๊ณตํ•  query์ •๋ณด๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— router์˜ query ์˜ค๋ธŒ์ ํŠธ๋Š” ๋น„์–ด์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  query ๊ฐ’์€ ์ˆ˜ํ™” ํ›„ ํด๋ผ์ด์–ธํŠธ ์ธก์— ์ฑ„์›Œ์ง‘๋‹ˆ๋‹ค.

์ด ๊ธฐ๋Šฅ์„ ํ†ตํ•ด Next.js๋Š” ์„œ๋ฒ„ ๋ Œ๋”๋ง ๋ฐ ์ •์ ์œผ๋กœ ์ƒ์„ฑ ๋œ ํŽ˜์ด์ง€๊ฐ€ ๋ชจ๋‘ ํฌํ•จ ๋œ ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ์„ฑ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ Next.js ๋Š” ํ•ญ์ƒ ๊ธฐ๋ณธ์ ์œผ๋กœ ๋น ๋ฅธ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

Example

Using _app.js for 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>
    )
  }
}
โš ๏ธ **GitHub.com Fallback** โš ๏ธ