_app.tsx 와 함께 _document는 서버에서만 렌더링되는 파일이기 때문에 onClick같은 이벤트, window객체, DOM 등 클라이언트에서 사용하는 코드는 사용될 수 없다. (_app 실행 이후 _document 실행됨)
pages폴더 안에 _document.tsx를 만들면 된다.(typscript를 사용하지 않으면 _document.js)
그럼 _document.tsx는 뭐하는녀석일까??
html을 커스텀하라고 next.js에서 제공하는 녀석이다.
공통으로 사용할 폰트태그를 _document.tsx의 Head태그에 넣어보자
localhost:3000/hi를 다음과 같이 작성하고
_document.tsx의 <Head>태그안에 다음과 같이 넣어주면
next/document 에서 제공하는 기본적인 태그들과 함께 _document.tsx에서 작성한 폰트 태그가 head안에 있는 것을 볼 수 있다.
보통 크롤링에게 페이지가 어떻게 보일지 알고 싶을때, 자바스크립트를 끄고 페이지를 렌더링시킨다.
자바스크립트를 끈 페이지에서도 _document.tsx안에 적은 폰트태그, localhost:3000/hi에 적은 <title>태그가 잘 적용된 것을 볼 수 있다.(서버사이드 렌더링을 하기 때문)
즉 _document.tsx안에는 제품전체에서 공통으로 사용할 gtm, 폰트태그, 채널톡, 광고태그, 메타태그 등을 적는 것이 좋다.
만약 페이지마다 title태그가 달라야 한다면, title태그는 _document.tsx안에 적지 말아야 한다.
_document.tsx(_document.js) 작성시 주의사항
- 공통으로 사용되기 때문에 title태그, 페이지별 메타태그등은 적지 않는것이 좋다.
- _document에서 사용하는 <Head> 태그는 next/head가 아닌 next/document 모듈에서 불러와야 한다.(서로 내용물이 다름)
- 서버에서 실행되기 때문에 window객체, dom, 이벤트핸들러 등을 작성하면 안됨
- <Main /> 컴포넌트를 제외한 부분은 브라우저에서 실행되지 않는다.
'개발 > Next.js' 카테고리의 다른 글
| ISR : 일정주기마다 업데이트 해주는 SSG (0) | 2022.09.13 |
|---|---|
| router.push, <Link />, <a /> 차이 (0) | 2022.07.29 |
| getStaticProps - Next.js에서의 프리렌더링 (0) | 2022.07.24 |
| Next에서 커스텀 훅(useWindowSize)로 반응형을 작성하면 안되는 이유 (0) | 2022.07.18 |
| globalStyle 때문에 ol태그가 적용 안될 때 (0) | 2022.05.26 |
