기본적으로 Next.js는 빌드 시 자동으로 인라인 글꼴 CSS를 사용하여 글꼴 선언을 가져오는 추가 라운드 트립을 제거합니다, ㄷ따라서 첫 번째 내용물 페인트(FCP)와 최대 내용물 페인트(LCP)가 개선됩니다.
HTML <link> 태그
<link>태그는 해당 문서와 외부 소스(external resource)사이의 관계를 정의할 때 사용합니다. <link>요소는 빈 태그이며, 속성만을 포함합니다. 또한, 이 요소는 <head>요소 내부에만 위차할 수 있으며, 그 갯수에는 제한이 없습니다.
이러한 <link>요소는 주로 외부 스타일 시트를 연결할 때 사용됩니다.
Usage
// pages/_document.js import Document, { Html, Head, Main, NextScript } from 'next/document' class MyDocument extends Document { render() { return ( <Html> <Head> <link href="https://fonts.googleapis.com/css2?family=Inter&display=optional" rel="stylesheet" /> </Head> <body> <Main /> <NextScript /> </body> </Html> ) } } export default MyDocument
'Web > NextJs' 카테고리의 다른 글
| Next.js - with Redux thunk (0) | 2022.03.01 |
|---|---|
| Next.js - Static File Serving (0) | 2022.02.25 |
| Next.js - Image Optimization (0) | 2022.02.25 |
| Next.js - useSWR (0) | 2022.02.25 |
| Next.js - Layouts (0) | 2022.02.25 |