반응형
이미지 최적화
개념
Next.js는 자체적으로 이미지 최적화 기능을 제공하며, <Image> 컴포넌트를 통해 자동으로 최적화를 처리합니다.
기본 사용법
import Image from 'next/image'
<Image
src="/example.jpg"
alt="설명"
width={500}
height={300}
/>
외부 이미지 사용 설정
외부 도메인의 이미지를 사용할 때는 next.config.js에서 허용 도메인을 설정해야 합니다:
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
logging: {
fetches: {
fullUrl: true,
}
},
images: {
domains: [
'shopping-phinf.pstatic.net',
'example.com' // 추가 도메인
]
}
};
export default nextConfig;
최적화 기능
- 자동 포맷 변환: WebP, AVIF 등 최적 포맷으로 변환
- 레이지 로딩: 뷰포트에 들어올 때만 로드
- 반응형 이미지: 디바이스별 적절한 크기 제공
- 성능 향상: CLS(Cumulative Layout Shift) 방지
검색 엔진 최적화 (SEO)
정적 메타데이터
페이지에서 metadata 객체를 export하면 자동으로 적용됩니다:
import { Metadata } from 'next'
export const metadata: Metadata = {
title: "한입 북스",
description: "한입 북스에 등록된 도서를 만나보세요",
openGraph: {
title: "한입 북스",
description: "한입 북스에 등록된 도서를 만나보세요",
images: ["/thumbnail.png"],
},
};
동적 메타데이터 - 검색 결과
검색 쿼리에 따라 메타데이터를 동적으로 생성:
export async function generateMetadata({
searchParams
}: {
searchParams: Promise<{ q?: string }>
}): Promise<Metadata> {
const { q } = await searchParams;
return {
title: `한입 북스 - ${q} 검색 결과`,
description: `한입 북스에서 ${q}에 대한 검색 결과입니다.`,
openGraph: {
title: `한입 북스 - ${q} 검색 결과`,
description: `한입 북스에서 ${q}에 대한 검색 결과입니다.`,
images: ["/thumbnail.png"],
},
};
}
동적 메타데이터 - 상세 페이지
API에서 데이터를 가져와 메타데이터 생성:
export async function generateMetadata({
params
}: {
params: Promise<{ id: string }>
}): Promise<Metadata> {
const { id } = await params;
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${id}`,
{ cache: "force-cache" }
);
if (!response.ok) {
throw new Error(`도서를 불러오는 데 실패했습니다: ${response.statusText}`);
}
const book: BookData = await response.json();
return {
title: `${book.title} - 한입 북스`,
description: `${book.description}`,
openGraph: {
title: `${book.title} - 한입 북스`,
description: `${book.description}`,
images: [book.coverImgUrl],
},
};
}
성능 최적화
- 메모이제이션: generateMetadata와 페이지 컴포넌트에서 동일한 API 호출 시 중복 요청하지 않음
- 캐싱: generateStaticParams가 있으면 자동으로 force-cache 적용
- 자동 적용: export한 메타데이터가 HTML <head>에 자동 삽입
Vercel 배포
설치 및 로그인
# Vercel CLI 설치
npm i -g vercel
# Vercel 계정 로그인
vercel login
배포 과정
# 최초 배포 (설정 및 미리보기)
vercel
# 프로덕션 배포
vercel --prod
# 변경사항 재배포
vercel --prod
배포 과정
- 최초 실행: 프로젝트 설정 및 미리보기 배포
- 프로덕션 배포: -prod 옵션으로 실제 서비스 배포
- 자동 배포: GitHub 연동 시 푸시할 때마다 자동 배포
주요 특징
- 자동 최적화: 빌드 최적화 자동 적용
- 전역 CDN: 전 세계 엣지 서버를 통한 빠른 로딩
- 무료 호스팅: 개인 프로젝트는 무료 사용 가능
- 도메인 자동 생성: .vercel.app 도메인 자동 할당
이 링크를 통해 구매하시면 제가 수익을 받을 수 있어요. 🤗
https://inf.run/4oB9v
반응형
'기술, 개발 > nextjs' 카테고리의 다른 글
| 10차 강의 노트(고급 라우팅 패턴) (0) | 2025.08.28 |
|---|---|
| 9차 강의 노트 (서버 액션) (0) | 2025.08.28 |
| 8차 강의 노트 (스트리밍) (3) | 2025.08.28 |
| 7차 강의 노트 (페이지 캐싱) (0) | 2025.08.28 |
| 6차 강의 노트 (데이터 페칭) (0) | 2025.08.28 |