Next.js 프로젝트를 처음 생성하면 기본적으로 제공되는 _document와 _app이 제공된다.
오늘은 이 두 페이지의 사용 목적에 대해 알아보려고 한다.
_app
_app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 루트 컴포넌트이다. 페이지에 적용 할 공통 레이아웃을 정의 할 때 사용 할 수 있다.
ex)
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}가장 초기 생성 된 _app의 코드를 확인해보면
1. Component 속성 값은 서버에 요청한 페이지가 된다.
- 아래 예시를 보게 된다면 _app을 통해 Component의 속성 값은 서버에 요청한 페이지가 되고, 그 페이지를 렌더링을 시켜주게 된다.
2. 글로벌한 css 또는 Redux의 Provider 등 공통 요소를 처리해야 할 때 쓰인다.
ex) Redux Persist로 감싸기
const persistor = persistStore(store);
export default function App({ Component, pageProps }: AppProps) {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Layout>
<Component {...pageProps} />
</Layout>
</PersistGate>
</Provider>
);
}
_document
_document는 _app 다음에 실행 되며, 공통적으로 활용 할 메타 태그 혹은 body 태그 안에 들어갈 내용들을 커스텀 할 때 쓰인다.
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="en">
<Head />
<title>Hoo Dev</title>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}위 코드와 같이 <title> 마크업 태그를 작성해 줌으로서 모든 페이지에서 Hoo Dev 라는 title을 가지게 된다.
1. SSR만의 실행이므로, 클라이언트의 처리를 써서는 안된다.
2. _document는 서버에서만 렌더링 되므로, onClick 같은 이벤트 핸들러는 작동이 안된다.
3. _document는 공통적으로 적용 할 HTML 마크업을 중심으로 다룬다.
'Next.js' 카테고리의 다른 글
| [Next.js] getStaticPaths와 getStaticProps를 사용하여 정적 페이지 만들기 (0) | 2023.02.15 |
|---|---|
| [Next.js] 상태 관리 라이브러리 SWR이란? (0) | 2023.02.14 |
| [Next.js] Next.js에서 window 혹은 document 속성 불러오기(dynamic import) (0) | 2023.02.10 |
| [Next.js] getServerSideProps란? (SSR) (0) | 2023.02.10 |
| [Next.js] getStaticProps란? (SSG, 정적 페이지 생성) (0) | 2023.02.09 |