next.js 에서는 font optimazation이라는 기능을 제공해.
웹 폰트를 fetch할 때 extra round trip을 제거해준다고 되어 있는데 ㅋㅋ 참 영어를 한글로 바꾸기 힘드네.. 원래는 추가적으로 다운받고 하는 절차가 발생하나 봐? 어쨋든 뭐 그냥 헤더에서 넣어서 쓰면 되나보다 했는데 넣으라는 위치가 따로 있네?
넣으라는 위치는 pages 폴더에 _document.js(tsx) 파일의 <Head> tag 안이야.
import Document, { Html, Head, Main, NextScript } from "next/document";
export default class CustomDocument extends Document {
render() {
return (
<Html>
<Head>
{/*여기는 모든 헤더에 공통적으로 사용되는 것들만 넣을 것. title 따위는 next/head 즉 page에 넣을 것*/}
{/*여기가 웹 폰트 위치! next/head에 넣는 것은 추천하지 않음. 현재는 구글 폰트와 typekit만 지원함.*/}
<link
href="https://fonts.googleapis.com/css?family=Tangerine"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
_document.js(tsx)라는 파일은 next.js 프로젝트에 기본적으로 포함되어 있지 않아서 만들어야 하는데 위 코드랑 내용 똑같아. 주석하고 웹폰트 사용하기 위한 <link> tag만 추가한거야. 그리고 나머지 css 파일에서 font-family 설정하면 해당 폰트를 사용할 수 있지.
문서에서 next/head 에서 그러니까 특정 page에서 웹폰트를 추가하지 말라는 내용이 있는데 그렇게 하면 그 페이지에서만 폰트가 적용되서 그래. 그리고 이 기능은 현재 구글 폰트랑 typekit 폰트만 지원한다고 하네 참고하고!
겸사 겸사 _document.js 관련한 문서도 읽어 봤는데 특별한 건 없네. _document.js는 전체 문서에 공통적으로 적용할 것들을 설정할 수 있는 파일이야. 예를 들면 Html tag에 lang="en" 이딴거 ㅎㅎ 서버 사이드에서만 동작하구. 헤더에 title 이딴 건 넣지 말라는 소리도 있고 암튼 하지 말라는 거 투성이네. ㅎㅎ 폰트삽입이나 그런거 말고는 왠만하면 넣지 말아야 겠어.
_document.js(tsx)관련 자세한 내용은 아래 링크 참고햐~
https://nextjs.org/docs/advanced-features/custom-document
Advanced Features: Custom `Document` | Next.js
Extend the default document markup added by Next.js.
nextjs.org
'Next.js' 카테고리의 다른 글
| Next.js NextUI (0) | 2022.06.08 |
|---|---|
| Next.js + styled-components + tailwindcss + SSR (6) | 2022.05.28 |
| Next.JS App engine 비용 (0) | 2022.05.26 |
| Next.JS on Google Cloud App engine (0) | 2022.05.23 |
| Next.JS Javascript disable test (0) | 2022.02.28 |