import Document, { Head, Html, Main, NextScript } from "next/document";
class CustomDocument extends Document {
render(): JSX.Element {
console.log("Document is running");
return (
<Html lang="ko">
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main></Main>
<NextScript></NextScript>
</body>
</Html>
);
}
}
export default CustomDocument;
//NextJS앱의 html 뼈대를 짜주는 역할
//안의 Main은 Nextjs가 앱 컴포넌트를 랜덩링 해주는 것.
//HTML 뼈대를 짜주는 역할을 하는 파일이라 서버에서 단 한번 실행 됨.
//<Main>안에서 _app.tsx가 들어간다._document.tsx의 역할.
이 페이지는 단 한번 렌더링 됨.
그리고 아래 html은 크롤라나 bot이 올 때 이미 완성되어있다. SEO에 좋다.
아래는 위치
NextJS의 폰트 최적화는 구글 폰트에 한정되어있기 때문에 구글폰트 링크를 써야 함.
어떻게 최적화 해줄까?
개발자모드에선 확인 안됨.
빌드해야 함
일단 구글폰트를 불러오는 링크(<linkhref="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"rel="stylesheet"/>)에는 폰트를 불러올 링크들이 또 있다.
따라서 빌드 시에 이 링키들을 열어서 한군데 모아줌. 그러니 이미 폰트들을 불러와 두는거지. 두단계를 건너 뛴다고 보면 되나? 꽤나 도움이 될듯하다.
'클론코딩-캐럿마켓 > 후반' 카테고리의 다른 글
| Next.js - SSG 19.9 Blog Section && 19.10 getStaticProps (0) | 2023.01.21 |
|---|---|
| Next.js - 19.6 getServerSideProps + 19.7 SSR + SWR (0) | 2023.01.20 |
| Next.js - 19.5 Script Component (0) | 2023.01.20 |
| Next.js - 19.2 Dynamic Imports && 19.3 Lazy-load Imports (0) | 2023.01.17 |
| Next.js - 19.0 Middlewares & 19.1 Responses and Redirections (1) | 2023.01.17 |