Next.js Image, Head 컴포넌트

hyemeeny·2024년 9월 24일

목록 보기

3/9

📌 Image 컴포넌트

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 { useRouter } from "next/router";
import Head from "next/head";

export default function Search() {
  const router = useRouter();
  const { q } = router.query;

  return (
    <>
      <Head>
        <title>{q} 검색 결과 - Codeitmall</title>
      </Head>
    
      .../
    </>
  );
}

만약 사이트 전체에 공통으로 적용하고 싶다면 /pages/_app.js 파일에서 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} />
    </>
  );
}

📌 개발모드, 빌드, 실행 그리고 배포

📖 개발 서버 켜기

프로젝트 폴더에서 터미널을 연 다음, 아래 명령을 입력해서 개발 서버를 실행할 수 있다. 개발 모드이기 때문에 새로고침 없이도 수정 사항을 그때 그때 확인할 수 있다.

npm run dev

📖 빌드하기

Next.js 프로젝트를 배포하려면 우선 실행 가능한 형태로 코드를 변환한 다음에, 서버에서 실행을 해야 한다. 이때 코드를 변환하는 과정을 "빌드"라고 한다. 빌드를 하려면 프로젝트 폴더에서 터미널을 연 다음, 아래 명령어를 입력한다. 그럼 .next 폴더에 실행에 필요한 파일들이 생성된다.