이미지 최적화
웹 성능을 개선하는 중요한 작업으로, 다음 방법들을 활용할 수 있음
- 차세대 형식 사용: WebP, AVIF로 변환
- 디바이스 크기에 맞는 이미지 제공: 적절한 해상도로 최적화
- 레이지 로딩 적용: 스크롤 시 필요한 이미지만 로드
- 블러 이미지 사용: 로딩 중에도 사용자 경험 개선
*이미지 최적화 예제
import Image from "next/image";
export default function BookItem({...}: BookData) {
return (
<Image
src={coverImgUrl}
width={80}
height={105}
alt={`도서 ${title}의 표지 이미지`}
/>
...
);
}
* 외부 이미지 로드 문제 해결
외부 도메인의 이미지를 사용하려면 next.config.js 파일을 수정
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
domains: ["외부 이미지 도메인"],
},
};
export default nextConfig;검색 엔진 최적화 (SEO)
검색 엔진에서 사이트의 가시성을 높이는 데 중요한 요소
- Sitemap 설정: 검색 엔진이 사이트 구조를 쉽게 파악하도록 지원
- RSS 발행: 콘텐츠 구독을 활성화
- 시멘틱 태그 사용: <header>, <main>, <article> 같은 태그로 구조 명확히 하기
- 메타 데이터 설정: title, meta description, og:image 등을 통해 검색 및 소셜 미디어 공유 최적화
import Head from "next/head";
export default function SEOExample() {
return (
<Head>
<title>SEO 최적화 예제</title>
<meta name="description" content="SEO 최적화를 위한 Next.js 예제 페이지" />
<meta property="og:title" content="SEO 최적화 예제" />
<meta property="og:description" content="Next.js에서 검색 엔진 최적화를 구현하는 방법" />
<meta property="og:image" content="/path/to/image.jpg" />
</Head>
);
}'넥스트js' 카테고리의 다른 글
| [next.js]패럴렐 라우트란🤔 (0) | 2025.01.01 |
|---|---|
| [next.js]렌더링 패턴 (2) | 2024.12.27 |
| [next.js]Parallel Route ,Intercepting route (0) | 2024.12.17 |
| [next.js]dynamic 옵션 (0) | 2024.12.12 |
| [next.js]캐싱 (0) | 2024.12.12 |