반응형
NextJS 에서의 글꼴
nextJS 에서는 글꼴(폰트)을 자동으로 최적화해주는 기본 글꼴을 제공한다. 보통 사용자가 직접 정의한 글꼴을 사용하는 경우에는 레이아웃 시프트가 발생할 수 있다.
즉, 사용자 정의 글꼴 브라우저에서 다운로드되어 표시되기 전 까지 기본 브라우저 글꼴로 대체되어 있다가, 사용자 정의 글꼴이 다운로드된 후에 글꼴이 적용되므로, 이 때 기본 글꼴과 다운로드 글꼴의 사이즈 차이로 인해 레이아웃이 재계산되어 반영되는 문제가 발생할 수 있다.
따라서 NextJS 에서는 이러한 레이아웃 시프트 문제를 최대한 방지하기 위해, 사용자 정의 글꼴에 대한 추가적인 네트워크의 요청이 없도록 빌드 시에 정적 자산(ex. HTML)과 함께 글꼴을 다운로드하고 함께 호스팅하여 사이트를 방문한 사용자의 입장에서는 글꼴이 깨지지 않은 상태에서 부드러운 화면 렌더링이나 전환을 경험할 수 있도록 해준다.
사용법
직접 font 를 layout.ts 파알에서 불러와서 지정해도 상관없지만, 재사용성을 위해서 별도의 font 파일을 생성하여 사용하고자 하는 폰트를 지정한다.
| 참고 |
| 여기서 subsets 은 inter 글꼴(폰트)을 적용 하는 대상이 되는 언어의 특징( 라틴 알파벳 등)을 지정할 때 사용된다. 즉, 아래 예시에서는 ['latin'] 배열에 라틴 알파벳(ex. A, B, C,.. 등)을 뜻하며, 라틴 알파벳을 사용하는 모든 언어에 inter 글꼴을 적용한다는 의미이다. 따라서 latin 이 아닌 다른 베이스를 사용하는 언어는 inter 를 적용하지 않으므로 불필요한 글꼴에 대한 다운로드를 하지 않아서 리소스 낭비를 방지할 수 있다. |
// app/ui/font.ts
import { Inter } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });
그 후 inter 를 적용하고자 하는 layout.ts 파일로 와서 적용하고자 하는 JSX 요소의 className 에 inter.className 이라고 지정하면 전역적으로 최적화된 글꼴을 지정할 수 있다.
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
);
}
반응형
'넥스트' 카테고리의 다른 글
| [NextJS] 메타데이터의 개념과 중요성, NextJS에서의 기초 사용법 (2) | 2024.01.25 |
|---|---|
| [NextJS] next.js 개발중 권장 사항 (0) | 2024.01.20 |
| [next.js] 클라이언트 측에서 POST 로 정보 받을 때 서버에서 읽는 코드 (0) | 2023.12.20 |
| [Next.js] next-auth 를 활용하여 깃허브 소셜로그인 기능 만들기(클라이언트 API) (0) | 2023.09.30 |
| [next.js] 16. 컴포지션 패턴 (0) | 2023.09.10 |
