이번 레슨에서는 Image 컴포넌트, Head 컴포넌트, 그리고 빌드와 실행하는 방법에 대해 간단히 정리해보고 넘어가겠습니다.
Imag 컴포넌트
Next.js에서는 이미지를 사용할 때 Next.js 서버를 한 번 거쳐서 이미지 최적화를 한 다음 사용할 수 있도록 해 주는데요. 그래서 되도록이면 img 태그보다는 Image 컴포넌트를 사용하는 걸 권장합니다. Image 컴포넌트는 next/image에서 불러와서 사용합니다. 이때 반드시 크기가 있어야 하는데요. width와 height 값을 지정하거나 또는 fill이라는 Prop을 사용할 수 있습니다.
width와 height를 사용하는 경우
img 태그와 마찬가지로 너비와 높이를 지정해 줍니다.
import Image from 'next/image';
export default function Page() {
return (
<>
<Image
src="/images/product.jpeg"
width={300}
height={300}
alt="상품 이미지"
/>
</>
);
}fill을 사용하는 경우
이미지 크기를 유연하게 지정해야 할 때는 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 컴포넌트
next/head에서 불러와서 Head 컴포넌트 안에 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 컴포넌트를 활용해 보세요.
pages/_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} />
</>
);
}개발모드, 빌드, 실행 그리고 배포
개발 서버 켜기
프로젝트 폴더에서 터미널을 연 다음, 아래 명령을 입력해서 개발 서버를 실행할 수 있습니다. 개발 모드이기 때문에 새로고침 없이도 수정 사항을 그때 그때 확인할 수 있습니다.
npm run dev빌드하기
Next.js 프로젝트를 배포하려면 우선 실행 가능한 형태로 코드를 변환한 다음에, 서버에서 실행을 해야 하는데요. 이때 코드를 변환하는 과정을 "빌드"라고 합니다. 빌드를 하려면 프로젝트 폴더에서 터미널을 연 다음, 아래 명령어를 입력합니다.
npm run build그럼 .next 폴더에 실행에 필요한 파일들이 생성됩니다.
실행 하기
프로젝트를 빌드했다면 이제 실행할 수 있습니다. 마찬가지로 프로젝트 폴더에서 터미널을 연 다음, 아래 명령어를 입력합니다.
npm run start배포하기
Vercel(https://vercel.com/)이라는 서비스를 이용하면 Next.js 프로젝트를 간편하게 배포할 수 있었는데요. GitHub 리포지토리와 연동해 놓으면, 리포지토리가 업데이트될 때마다 빌드와 실행 과정을 Vercel이 알아서 수행합니다.
