[최적화와 배포]

아래는 이미지 최적화와 관련된 내용들

webp, AVIF 등의 차세대 형식으로 변환
디바이스 사이즈에 맞는 이미지 불러오기
레이지 로딩 적용
블러 이미지 활용
기타등등..

이러한 작업을 Nextjs 에서는 Image 컴포넌트로 쉽게 구현 가능

외부 서버에 보관된 이미지 사용하는 방식이라면 보안때문에 차단된 상태

// next.config.js
const nextConfig = {
	...
    images: {
    	domains: ["~.net"]
    }
}

동적으로 메타데이터 설정하기

// 정적
export const metadata : Metadata = {
	...
}

or

// 동적
// Page 에서 props 로 전달받은 값을 그대로 사용 가능
export async function generateMetadata({searchParams}): Promise<Metadata> {
	const { q } = await searchParams;
    
    // API 호출도 가능
    // const response = await fetch(...)
    
	return {
    	title: `${q} : 검색`,
        ...
    }
}

위 방식대로 작성하면 해당 페이지에 설정한 메타데이터가 index.html 에 설정됨