next Image 사용법

import Image from "next/image";
import Link from "next/link";

export default function Hero() {
  return (
    <section className="flex flex-col justify-center items-center gap-2">
      <Image
        className="rounded-full"
        src='/images/profile.jpg'
        width={200}
        height={200}
        alt="My Profile Image"
      />
      <h2 className="text-4xl font-black">여긴 내 블로그야</h2>
      <h3 className="text-2xl font-bold">빈 손으로 온 거야?</h3>
      <p>그만 돌아가줬으면 좋겠어</p>
      <Link href='/contact' className="bg-blue-300 rounded-lg font-bold px-4 py-1">Contact me</Link>
    </section>
  )
}

• Image를 import 하고 src에서 폴더 내 경로를 찾아간다.

src의 기본 경로는 public이다.

• width와 height를 넣어주고, alt까지 필수요소다.
• round-full을 이용해 사진 동그랗게 만들기 가능
  

next Image 외부 url 가져오기

• 그냥 img 태그 사용할 때처럼 가져오면 오류가 난다.
• next.config.ts에서 따로 설정이 필요하다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'oopy.lazyrockets.com',
        pathname: '/api/**'
      }
    ]
  }
}

module.exports = nextConfig

// pathname 생략
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'oopy.lazyrockets.com/**',
        // pathname: '/api/**'
      }
    ]
  }
}

module.exports = nextConfig

• protocol 가져올 링크의 http나 https 적어주기
• hostname baseURL 이름 적어주기
• pathName hostName 이후 적어주기
• *: 단일 경로로 어떤 단어가 와도 일치 가능
• **: 몇 개의 경로가 와도 일치 가능. 단 중간에서는 ** 쓰면 오류남

설정 후 코드 및 화면

import Image from "next/image";
import Link from "next/link";

export default function Hero() {
  return (
    <section className="flex flex-col justify-center items-center gap-2">
      <Image
        className="rounded-full"
        src='/images/profile.jpg'
        width={200}
        height={200}
        alt="My Profile Image"
      />
      <Image
        className="rounded-full"
        src='https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fthumbnail7.coupangcdn.com%2Fthumbnails%2Fremote%2F492x492ex%2Fimage%2Frs_quotation_api%2Fysrimegn%2F61c98841c46b4834becfb17ae6097027.jpg&blockId=2618ba81-a66c-4218-aff7-0e1ca5ba2b51'
        width={200}
        height={200}
        alt="My Profile Image"
      />
      <h2 className="text-4xl font-black">여긴 내 블로그야</h2>
      <h3 className="text-2xl font-bold">빈 손으로 온 거야?</h3>
      <p>그만 돌아가줬으면 좋겠어</p>
      <Link href='/contact' className="bg-blue-300 rounded-lg font-bold px-4 py-1">Contact me</Link>
    </section>
  )
}

참고 사이트

• https://nextjs.org/docs/pages/api-reference/components/image