-
Next.js _app, _documnetFrontend/NextJS 2023. 5. 1. 14:25
yarn create next-app --typescript를 통해 next.js 기본설정을 마치다보면 자동으로 _app.tsx, _document.tsx가 설치되어있는 모습을 볼 수 있다. 이 두가지는 next.js에 어떤 역할을 주는지 알아보자!
1. _app.tsx
기본적으로 Next.js에서는 App의 구성 요소를 사용하여 모든 페이지를 초기화한다.
따라서 App.tsx를 만들어 기본 App 구성 요소를 덮어 쓸 수 있다.
즉, 모든 페이지에서 공통으로 필요한 처리를 여기에서 작성하여 쓰면 된다. 이를테면
- 페이지 간 공통 레이아웃
- 전역 State (Store,React-query 설정 등)
- 글로벌 CSS
- 각 Route Provider
- 상태관리 library의 Provider, Redux의 Provider, React-query의 Query ClientProvider,
등이 있다.
import { QueryClientProvider, Hydrate } from "@tanstack/react-query"; import type { AppProps } from "next/app"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { useState } from "react"; import queryClientInstance from "../lib/queryClient"; import globalStyles from "@/styles/globals"; import typography from "@/styles/typography"; export default function App({ Component, pageProps }: AppProps) { const [queryClient] = useState(queryClientInstance); globalStyles(); typography(); return ( <QueryClientProvider client={queryClient}> <Hydrate state={pageProps.dehydratedState}> <div>어디에서든 나와요.</div> <Component {...pageProps} /> <ReactQueryDevtools initialIsOpen={false} /> </Hydrate> </QueryClientProvider> ); }위는 _app.tsx의 예시이다.
1번인 <div>어디에서든 나와요.</div>를 넣어주면 모든 페이지 상단에 Header가 표시된다.
또한 gloabal css인 globalStyles()와 typography()를 넣어주었고 상태관리 library는 react-query를 채택해 QueryClientProvider를 전체에 감싸주었다.
2. _document.tsx
사이트를 만들 때 가장 루트 경로가 되는 파일은 index.html이다.
next 초기 설정에는 index.html을 볼 수가 없고 이 역할을 _document.tsx가 대신한다.
Html, Head, Main, NextScript, Link, 스타일시트 링크, 폰트 임포딩 등등의 역할을 담당한다.아래는 기본적인 설정을 적용한 예시이다.
import { Html, Head, Main, NextScript } from 'next/document'; import { getCssText } from '../stitches.config'; export default function Document() { return ( <Html lang="en"> <Head> <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} /> </Head> <body> <Main /> <NextScript /> </body> </Html> ); }_documents.tsx를 작성할 대 주의할 점은 오로지 SSR을 위한 소스코드라는 점에 있다.
즉, 서버에서만 실행되므로 onClick와 같은 이벤트 핸들러와 useEffect등의 클라이언트 측 처리는 되지 않는다.
'Frontend > NextJS' 카테고리의 다른 글
Next.js 렌더링 방식 및 react-query를 이용한 hydrate (0) 2023.05.01 next.js getInitialProps, getServerSideProps, getStaticProps, getStaticPath, (0) 2023.05.01 nextJS 왜 쓰는가 (0) 2023.01.19