본문으로 건너뛰기

글꼴 최적화

버전 10.2부터 넥스트에는 웹 글꼴 최적화가 내장되어 있습니다.

기본적으로 넥스트는 빌드 타임에 글꼴 CSS를 자동으로 인라인하여 글꼴 선언을 가져오기 위한 추가 왕복을 제거합니다. 이를 통해 FCP(First Contentful Paint)과 LCP(Large Contentful Paint)가 개선됩니다.

예시:

jsx
// 이전
<link
  href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
  rel="stylesheet"
/>
// 이후
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<style data-href="https://fonts.googleapis.com/css2?family=Inter&display=optional">
  @font-face{font-family:'Inter';font-style:normal...
</style>
jsx
// 이전
<link
  href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
  rel="stylesheet"
/>
// 이후
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<style data-href="https://fonts.googleapis.com/css2?family=Inter&display=optional">
  @font-face{font-family:'Inter';font-style:normal...
</style>

사용법​

넥스트 앱에 웹 글꼴을 추가하려면 커스텀 Document에 글꼴을 추가합니다.

jsx
// 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;
jsx
// 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;

next/head에 글꼴을 추가하는 것은 특정 페이지에만 적용되고 스트리밍 아키텍처에서는 작동하지 않기 때문에 권장하지 않습니다.

자동 웹 글꼴 최적화는 현재 구글 글꼴과 Typekit을 지원하며 곧 다른 글꼴 제공자도 지원할 예정입니다. 또한 로딩 전략과 font-display 값에 대한 제어 기능을 추가할 계획입니다.

자세한 내용은 Google 글꼴 표시를 참조합니다.

참고

글꼴 최적화는 현재 자체 호스팅 글꼴을 지원하지 않습니다.

최적화 비활성화하기​

넥스트가 글꼴을 최적화하는 것을 원하지 않으면 비활성화할 수 있습니다.

next.config.js
js
module.exports = {
  optimizeFonts: false,
};
next.config.js
js
module.exports = {
  optimizeFonts: false,
};