1. _App.tsx
넥스트js의 앱 컴포넌트는 리액트의 그것 처럼 페이지의 시작을 담당한다.
그리고 아래와 같은 역할을 할 수 있다.
- 레이아웃 지정
- 페이지 별로 추가 데이터를 전달
- 상태 값 분배
- 글로벌 CSS
형식은 기본값인 App.tsx (밑줄이 없는 App임! _App이 App을 오버라이드 하는 것)를 오버라이드(재정의) 하기 위해서 아래와 같이 사용한다.
//_app.tsx
import type { AppProps } from 'next/app'
export default function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
- 프롭으로 받아온 Component는 활성화된 페이지를 말한다. 요놈 덕에 라우팅을 통해 새로운 페이지로 이동할 때 우리는 새로운 페이지를 볼 수 있게 된다.
- pageProps는 getInitialProps, getStaticProps, getServerSideProps중 하나를 통해 페칭한 초기 오브젝트값. 페칭한 데이터가 없다면 비어있는 오브젝트이다.
- _App컴포넌트 자체 에서는 Next.js의 데이터 페칭 메소드들(getStaticProps, getServerSideProps)을 지원하지 않는다.
(곧 directory를 통해 가능해질 것으로 보인다. 현재는 베타버전! https://beta.nextjs.org/docs/upgrade-guide )
- getInitialProps를 사용해 모든 페이지에서 사용할 공통 값을 지정할 수 있으나, 그럴 경우에 Static Generation 없이는 자동정적최적화( Automatic Static Optimization)이 동작하지 않는다.
자동 정적 최적화란 별도의 동적인 요소가 없는 정적 페이지의 경우 자동으로 정적 페이지로 빌드해 주는 것을 말한다. 그런데 getInitialProps를 사용할 경우에 이 자동 기능이 없어진 다는 것. 사전생성이 필요하다면 getStaticProps함수를 사용해야 한다.
2. _document.tsx
//_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
속성에 대해 접근하여 수정할 수 있다.
//_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="en"> // 수정 !
<Head />
<body className="bg-white"> // 수정 !
<Main />
<NextScript />
</body>
</Html>
)
}
- 주의해야할 점은 여기서 사용한 Head 컴포넌트 는 next/head 와 다르다는 것. _document에서 사용한 Head컴포넌트는 모든 페이지에 적용 되어버리는 컴포넌트이다. 모든 페이지에 적용하지 않아야 될, 예를들어 title태그와 같은 것들은 각 컴포넌트 페이지에서 next/head를 통해 적용해야 한다.
- _document는 서버에서 실행된다. 브라우저 api, 이벤트 핸들러가 포함된 코드는 실행되지 않는다.
- <Main /> 컴포넌트 바깥의 것들은 브라우저에 의해 활성화 되지 않는다 ! 중요중요. 절대 어플리케이션 로직이나, CSS를 추가해 넣으면 안된다. 만약 모든 페이지에서 공유해야할 컴포넌트가 있다면 여기서 공유하지 말고 레이아웃 컴포넌트에서 하면 된다.
( 아 이걸 몰라서 여기서 레이아웃 짜다가 한참 삽질했다.. )
- _document.tsx에서도 getStaticProps, getServerSideProps 데이터 페칭 메소드를 지원하지 않는다.
참고사이트
'Frontend Study - 2 > Next.js' 카테고리의 다른 글
| Next.js : SSR. getServerSideProps / 클라이언트 사이드 페칭 필요한 경우(2) (1) | 2022.12.31 |
|---|---|
| Next.js : 정적생성 SSG 과 fetch! + ISR (1) (1) | 2022.12.15 |
| NextJs : 넥스트js의 라우팅 정리. (0) | 2022.12.14 |
