이미지 최적화 📖
next.js는 자동으로 이미지 크기를 최적화해주는 이미지 컴포넌트 `Image` 컴포넌트를 제공해 줍니다.
`크기 최적화`: 각 기기에 맞는 크기의 이미지를 자동으로 제공하고, Webp 및 AVIF와 같은 최신 이미지 형식을 사용합니다.
`시각적 안정성`: 이미지가 로딩될 때 레이아웃 이동을 자동으로 방지합니다.
`빠른 페이지 로드`: 네이티브 브라우저 지연 로딩을 사용해 이미지가 뷰포트에 들어올 때만 로드됩니다.
`자산 유연성`: 원격 서버에 저장된 이미지도 포함해 필요에 따라 이미지 크기 조정.
사용 방법
로컬 이미지 사용하기
import Image from 'next/image'
import profilePic from './me.png'
export default function Page() {
return (
<Image
src={profilePic}
alt="Picture of the author"
// width={500} 자동 제공
// height={500} 자동 제공
// blurDataURL="data:..." 자동 제공
// placeholder="blur" // 로딩 중 블러업 옵션
/>
)
}
로컬이미지는 리액트에서 썼던 방식과 똑같이 src에 있는 파일을 import 하고 src에 넣어주면 됩니다.
원격 이미지, 네트워크 이미지
import Image from 'next/image'
export default function Page() {
return (
<Image
src="<https://s3.amazonaws.com/my-bucket/profile.png>"
alt="Picture of the author"
width={500}
height={500}
/>
)
}
원격 이미지를 사용할 땐 로컬 이미지와 크게 다르지 않지만 따로 설정을 해줘야 합니다.
`next.config.js` 파일에 지원되는 URL 패턴을 정의해 안전하게 이미지 최적화를 할 수 있습니다.
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 's3.amazonaws.com',
port: '',
pathname: '/my-bucket/**',
},
],
},
최적화 방법
`laze loading`은 스크린 내 노출되는 이미지만 로드해 페이지 로드 속도를 개선하고 `next/image`컴포넌트를 사용하면 기본적으로 지원합니다.
`이미지 사이즈 최적화` next.js 서버에서 이미지를 용량이 적은 WebP, AVIF 포맷으로 변환하는 작업을 하게 됩니다.
❓ WebP, AVIF
WebP는 2010년 AVIF는 2019년에 정식 개발된 이미지 포맷으로 압축 효율이 뛰어나 많은 관심을 받고 있는 이미지 포맷입니다. AVIF가 WebP보다 보금 더 나은 압축 성능을 낸다고 알려졌으나, WebP를 지원하는 브라우저 범위가 조금 넓습니다.
`next.config.js`에 다음 설정을 추가해 주면 됩니다.
images: {
// ...
formats: ['image/avif', 'image/webp'],
},
Metadata를 통한 SEO 최적화 📖
❗정적 및 동적 메타데이터는 Server Components에서만 지원됩니다.
정적 메타데이터
`layout.tsx`또는`page.tsx`파일에서 `Metadata`객체를 내보냅니다.
// layout.tsx | page.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: '...',
description: '...',
}
export default function Page() {}
동적 메타데이터
동적 값이 필요한 메타데이터를 가져오려면 `generateMetadata`함수를 사용할 수 있습니다.
// app/products/[id]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next'
type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}
export async function generateMetadata(
{ params, searchParams }: Props,
): Promise<Metadata> {
// 경로 매개변수 읽기
const id = params.id
// 데이터 가져오기
const product = await fetch(`https://.../${id}`).then((res) => res.json())
return {
title: product.title,
}
}
export default function Page({ params, searchParams }: Props) {}
파일 기반 메타데이터는 공식문서를 참고해 주세요!
File Conventions: Metadata Files | Next.js
API documentation for the metadata file conventions.
nextjs.org
Font, Script 최적화📖
Font
폰트를 사용하려고 할 때 외부에서 다운로드해야 해서 폰트 적용 전/후로 글자 이동하는 레이아웃 쉬프팅을 겪어본 적이 있을 텐데요 `next/font`를 사용하면 자동으로 셀프 호스팅을 제공해 폰트를 자동을 최적화하고 외부 네트워크 요청을 제거해 개인정보 보호와 성능을 향상할 수 있습니다.
`Google Fonts`를 자동으로 셀프 호스틸 할 수 있어 배포 시 포함되어 동일한 도메인에서 제공됩니다.
import { Inter } from 'next/font/google'
const inter = Inter({
weight: '400', // font weight 속성도 사용 가능!!!
subsets: ['latin'],
display: 'swap',
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={inter.className}>
<body>{children}</body>
</html>
)
}
로컬 Font
`next/font/local`을 사용해 로컬 폰트도 적용할 수 있습니다.
import localFont from 'next/font/local'
const myFont = localFont({
src: './my-font.woff2',
display: 'swap',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={myFont.className}>
<body>{children}</body>
</html>
)
}
script
`next/script`를 사용해 스크립트를 최적화할 수 있습니다.
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
<Script src="https://example.com/script.js" />
</html>
)
}
또한, 스크립트 로딩 전략을 세부적으로 조정할 수 있습니다:
- beforeInteractive: Next.js 코드 및 페이지 하이드레이션 전에 스크립트 로드
- afterInteractive: (기본값) 페이지 하이드레이션 후 스크립트 로드
- lazyOnload: 브라우저 유휴 시간에 스크립트 로드
- worker: (실험적) 웹 워커에서 스크립트 로드
import Script from 'next/script'
export default function Home() {
return (
<>
<Script src="https://example.com/script.js" strategy="worker" />
</>
)
}다음 게시물
Next.js 알아보기 7 (Route Handler & Server Action)
Route Handler 📖webRequest와 Response APIs를 쓸 수 있는 핸들러를 만들 수 있게 끔 허용해 restful 한 api를 만들 수 있게 해 줍니다. 서버, 클라이언트 컴포넌트 개념을 포함하는 React 컴포넌트 개념을 벗
mingos-habitat.tistory.com
'공부 > Next' 카테고리의 다른 글
| [Next, Supabase Auth] 이메일, 소셜 로그인 기능 구현 및 트리거 설정 (2) | 2024.10.14 |
|---|---|
| Next.js 알아보기 8 (Caching - 어려움 주의) (0) | 2024.09.27 |
| Next.js 알아보기 7 (Route Handler & Server Action) (0) | 2024.09.26 |
| Next.js 알아보기 5 (Suspense, Loading, Error, Streaming SSR) (0) | 2024.09.26 |
| Next.js 알아보기 4 (주요 렌더링 기법) (1) | 2024.09.26 |
| Next.js 알아보기 3 (React Server Component, Client Component) (0) | 2024.09.26 |
| Next.js 알아보기 2 (Link, useRouter, 예약 파일) (0) | 2024.09.25 |
| Next.js 알아보기 1 (App Router, Pages Router) (0) | 2024.09.25 |
