[Next.js] _document & _app

2022. 9. 10. 15:10·Next.js/이론
목차
  1. _app
  2. _document
반응형

Next.js는 페이지에 공통으로 적용되는 _document와 _app이 존재한다. 

 

_app

서버에 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로 공통 레이아웃 역할을 한다. 

애플리케이션이 실행되면 가장 먼저 호출되기 때문에 글로벌한 작업을 수행할 때 사용한다. 

function app({ Component, pageProps }) {
    return <Component {...pageProps} />
  }
   
app.getInitialProps = async (appContext) => {
  // ...
  
  return { ...appProps }
}

사용 예.

  • 페이지 전환 시에도 전체 레이아웃을 유지하고 싶은 경우
  • 페이지 전환 후 state를 유지하고 싶은 경우
  • 페이지에 추가적인 데이터를 삽입하고 싶은 경우
  • 글로벌 CSS를 적용하고 싶은 경우 

_document

_app 다음에 실행되며, 공통적으로 활용하는 <head>나 <body> 태그 안에 들어갈 내용을 커스텀할 때

사용한다. 

import Document, { Html, Head, Main, NextScript } from 'next/document'

class Document extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default Document

_document는 서버에서만 렌더링 되므로 onClick과 같은 이벤트 처리는 작동되지 않는다. 

 

사용 예. 

  • 글로벌 커스텀 스타일 시트 로드 (ex_ Material UI, Bootstrap,... )
  • 글로벌 Head

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'Next.js > 이론' 카테고리의 다른 글

[Next.js] getInitialProps vs getStaticProps vs getServerSideProps  (0) 2022.09.09
[Next.js] 404 페이지  (3) 2022.07.05
[Next.js] Dynamic Routes  (1) 2022.07.05
[Next.js] Server Side Rendering  (1) 2022.07.04
[Next.js] Redirect & Rewrite  (1) 2022.07.03
  1. _app
  2. _document
'Next.js/이론' 카테고리의 다른 글
  • [Next.js] getInitialProps vs getStaticProps vs getServerSideProps
  • [Next.js] 404 페이지
  • [Next.js] Dynamic Routes
  • [Next.js] Server Side Rendering
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    알고리즘
    리얼클래스
    타입스크립트
    프로그래머스
    바질 키우기
    next.js
    ReactNative
    자바스크립트
    영어독학
    다이소
    바질
    네트워크
    Docker
    javascript
    CSS
    네이버 부스트캠프
    typescript
    덤프
    Babel
    ChatGPT
    react
    리얼학습일기
    webpack
    CCNA
    Node.js
    타일러영어
    영어회화
    redux
    식물
    리액트
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
[Next.js] _document & _app

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.