📚 Next.js에서 Image와 Head 컴포넌트 활용하기
웹 개발에 있어서 이미지 최적화와 페이지 메타 데이터 관리는 매우 중요하다. 이에, Next.js는 이러한 부분을 효율적으로 처리할 수 있도록 <Image>와 <Head> 컴포넌트를 제공한다.
이번 글을 통해서,이 두 컴포넌트의 사용 방법에 대해 알아보며, Next.js를 통한 최적화에 한 걸음 더 다가가보자.
Image 컴포넌트
📌 기본 사용법
Next.js에서는 최적화를 위해 다양한 기능을 제공하는데, 그 중에서도 이미지 최적화는 정말 유용한 기능이다. Next.js에서는 <Image>라는 컴포넌트를 제공하는데, 이 컴포넌트를 사용하면 Next.js 서버를 통해 쉽고 편하게 이미지 최적화를 할 수 있다. 따라서, Next.js에서는 되도록이면 <img> 태그보다는 <Image> 컴포넌트를 사용하는 걸 권장하고 있다.
Image 컴포넌트는 next/image에서 불러와서 사용한다. 이때 반드시 크기가 있어야 하는데, width와 height 값을 지정하거나 또는 fill이라는 Prop을 사용할 수 있다.
import Image from 'next/image';
export default function Page() {
return (
<Image
src="/images/product.jpeg"
width={300}
height={300}
alt="상품 이미지"
/>
);
}📌 fill을 사용하는 경우
fill이라는 prop에 대해 조금 더 자세하게 알아보자. 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>
);
}📌 nextjs.config.js 설정
<Image> 컴포넌트를 사용하기 위해 Next.js의 설정 파일을 적절히 설정해야 한다. 특히, 외부 이미지 소스를 사용하는 경우 이를 설정 파일에 명시해야 하니, 아래 예시와 같이 nextjs.config.js를 설정하는 것을 꼭 숙지하자.
//nextjs.config.js
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'example.com',
port:'',
pathname: '/path/to/images/*'
},
],
},
};Head 컴포넌트
📌 페이지별 Head 사용
Next.js에서는 React에서처럼 Head 컴포넌트를 HTML 문서의 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 컴포넌트를 활용하여 적용 가능하다.
이 때, 만약 다른 페이지에서 Head 컴포넌트를 사용하게 되면, 기존의 _app.js의 컴포넌트를 덮어쓰게 되니, 이 점도 참고하면 좋을 것 같다.
import Head from 'next/head';
export default function App({ Component, pageProps }) {
return (
<>
<Head>
<title>사이트 기본 제목</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Component {...pageProps} />
</>
);
}Outro
이번 글을 통해 Next.js의 Image와 Head 컴포넌트는 웹 개발의 효율성과 최적화에 큰 도움을 준다는 것을 알 수 있었다.
특히, Image 컴포넌트를 통해 이미지 최적화를 자동으로 처리할 수 있으며, Head 컴포넌트를 사용하면 메타 데이터 관리가 편리해진다는 장점을 직접 체험해볼 수 있었다.
앞으로도 Next.js에서 제공하는 컴포넌트들에 대해 깊이 있게 이해하고 공부하며, 최적화되고 효율성 높은 코드를 작성하기 위해 부단히 노력해보자.
