한입 -8 (結)

이미지 최적화

다양한 이미지 최적화 기법들

• webp, AVIF 등의 차세대 형식으로 변환하기
• 디바이스 사이즈에 맞는 이미지 불러오기
• 레이지 로딩 적용하기
• 블러 이미지 활용하기 등
  → Next.js는 Image 컴포넌트를 통해 한번에 처리가 가능하다

Image 컴포넌트 사용법

• 코드 추가 후, Next.config.mjs 에 항목 추가

images: {
    domains: [
      "오류메시지에 뜬 주소"
    ]
  }

검색엔진 최적화

다양한 검색엔진 최적화 기법들

• Sitemap 설정하기
• RSS 발행하기
• 시멘틱 태그 설정하기
• 메타 데이터 설정하기

• 페이지가 렌더링된 후 처리가 가능한 페이지의 경우, generateMetadata 함수를 사용해 현재 페이지 메타 데이터를 동적으로 생성하는 역할을 한다.

export function generateMetadata() {
  return {
      
  }
}