최적화 - 구글 폰트 적용 / Image 컴포넌트 / Head 컴포넌트
최종 수정 : 2024-05-31
구글 폰트 적용
Next.js에서는 구글 폰트를 위한 기능도 제공한다. 편하게 쓰는 것뿐만 아니라 여러 가지 최적화도 함께 제공한다.
import { Noto_Sans_KR } from '@next/font/google';
const notoSansKR = Noto_Sans_KR({
weight: ['400', '700'],
subsets: [],
});weight 프로퍼티에는 사용할 폰트 굵기에 400, 700을 갖는 폰트를 쓸 거라고 명시한다. 여기서 주의할 점은 숫자(400, 700 같은 형태)가 아니라 문자열('400', '700' 같은 형태)라는 것이다.
subset은 폰트에서 영문, 한글 이런 식으로 사용할 글자들만 골라 사용할 때 작성한다. 빈 배열로 작성하면, 일단 전부 다 사용하는 것을 의미한다. 만약 영문만 사용하길 원한다면 ['latin']과 같이 작성해주면 된다.
폰트를 적용하려면
1) notoSansKR 객체의 className 프로퍼티를 사용할 수 있다. 이 클래스가 적용된 요소 안에서는 폰트를 적용하게 된다.
<main className={notoSnasKR.className}>
...
</main>
2) 아니면 Next.js에서 제공하는 Head 컴포넌트를 활용해서 전역 스타일로 적용할 수도 있다.
<Head>
<style>{`
html {
font-family: ${notoSnasKR.style.fontFamily}, sans-serif;
}
`}</style>
</Head>
이와 같이, 작성하면 구글 폰트일지라도 우리 사이트에서 폰트 파일을 받아 오게 된다. 그로 인해, 초기 로딩 속도가 훨씬 빨라져 최적화가 이루어진다.
Image 컴포넌트
Next.js에서는 이미지를 사용할 때 Next.js 서버를 한 번 거쳐서 이미지 최적화를 한 다음 사용할 수 있다. 그래서 되도록이면 <img> 태그보다는 <Image> 컴포넌트를 사용하는 걸 권장한다. <Image> 컴포넌트는 next/image에서 불러와서 사용한다. 이때 반드시 크기가 있어야 하는데, width와 height 값을 지정하거나 또는 fill이라는 Prop을 사용할 수 있다.
# 1) width와 height를 사용하는 경우
import Image from 'next/image';
export default function Page() {
return (
<>
<Image
src="/images/product.jpeg"
width={300}
height={300}
alt="상품 이미지"
/>
</>
);
}# 2) fill을 사용하는 경우
이미지 크기를 유연하게 지정해야 할 때 사용한다. 이때 부모 요소에서 position: relative와 같이 포지셔닝해야 한다. fill을 사용할 경우, absolute 포지션으로 배치되기 때문에 '가장 가까운 포지셔닝이 된' 조상 요소에 꽉 차도록 이미지가 배치된다. 만약 이미지의 비율이 깨지는 것을 막고 싶다면 object-fit: cover 속성으로 이미지를 크롭하면 된다.
import Image from 'next/image';
export default function Page() {
return (
<>
<div
style={{
position: 'relative',
width: '100%',
height: '300px',
}}
>
<Image
src="images/product.jpeg'
fill
alt="상품 이미지"
style={{
objectFit: 'cover',
}}
/>
</div>
</>
);
}Head 컴포넌트
다음과 같이 작성하면 된다.
import Head from 'next/head';
export default function Page() {
return (
<>
<Head>
<title>페이지 제목</title>
<link rel="icon" href="/favicon.ico" />
</Head>
...
</>
);
}
만약 사이트 전체에 공통으로 적용하고 싶다면 /pages/_app.js 파일에서 <Head> 컴포넌트를 활용하면 된다.
import Head from 'next/head';
export default function App() {
return (
<>
<Head>
<title>사이트 기본 제목</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Component {...pageProps} />
</>
);
}