Next.js 16 App Router
Next.js 앱에서 OG 이미지 구현 및 확인
정적 metadata, 경로 인식 generateMetadata 또는 생성된 opengraph-image를 선택하고 공개 절대 URL를 사용하고 배포된 결과를 검사합니다.
파일 기반 또는 코드 기반 metadata를 의도적으로 선택하세요.
고정 값의 경우 정적 metadata 객체 내보내기를 사용하고 경로 데이터가 제목, 설명 또는 이미지를 변경하는 경우 generateMetadata를 사용합니다. 두 내보내기 모두 Server Components에 속합니다.
opengraph-image라는 파일은 파일 기반 metadata를 제공할 수 있습니다. 생성된 opengraph-image.tsx는 시각적 개체가 경로 데이터에 따라 달라지는 경우 ImageResponse를 반환할 수 있습니다. 동일한 경로 세그먼트에서 정적 metadata 및 generateMetadata를 내보내지 마십시오.
metadataBase가 포함된 정적 metadata
metadataBase는 상대 metadata URL을 해석합니다. https://starterpackai.com/og/home.png 같은 절대 공개 이미지 URL도 명시하면 앱 밖에서 확인하기 쉽습니다.
import type { Metadata } from 'next'
export const metadata: Metadata = {
metadataBase: new URL('https://starterpackai.com'),
title: 'A clear page title',
description: 'A concise share description',
openGraph: {
images: ['https://starterpackai.com/og/home.png'],
},
}Next.js 16의 경로 인식 generateMetadata
Next.js 16 App Router에서 params는 Promise입니다. 먼저 await params한 뒤 경로별 데이터를 읽어 generateMetadata를 반환하세요.
import type { Metadata } from 'next'
type Props = { params: Promise<{ slug: string }> }
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const { slug } = await params
const post = await getPost(slug)
return {
title: post.title,
openGraph: { images: [post.ogImageUrl] },
}
}동적 opengraph-image 및 ImageResponse
서버의 opengraph-image.tsx에서 params를 await하고, 명시한 크기로 ImageResponse를 반환하세요.
import { ImageResponse } from 'next/og'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'
export default async function Image({
params,
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params
return new ImageResponse(
<div style={{ display: 'flex', padding: 80 }}>{slug}</div>,
size
)
}배포 확인 체크리스트
- metadata 또는 generateMetadata가 서버 구성 요소 경로 세그먼트에서 실행되는지 확인하세요.
- 배포된 HTML를 열고 최종 og:title, og:description 및 og:image 값을 확인합니다.
- 별도의 세션에서 절대 공개 이미지 URL를 열고 성공적인 이미지 응답을 확인합니다.
- 작은 링크 카드 크기로 렌더링된 1200×630 구성을 확인하세요.
- 공개 metadata 검사기를 실행한 다음 캐시가 일치하지 않으면 플랫폼별 디버거를 사용하세요.
Next.js 구현 가이드
Next.js OG 이미지 질문
정적·동적 페이지를 위한 App Router 핵심 선택입니다.
metadata와 generateMetadata 중 무엇을 쓰나요?
고정값은 metadata, 내용이 라우트 데이터에 따라 달라지면 generateMetadata를 사용하세요.
opengraph-image 파일을 쓸 수 있나요?
네. App Router는 파일 기반 메타데이터를 지원하며 metadata API는 명시적·동적 제어에 적합합니다.
왜 이미지 URL은 절대 주소여야 하나요?
소셜 크롤러는 브라우저 세션 밖에서 이미지를 가져옵니다. 공개 절대 URL이 가장 명확하게 접근됩니다.
Next.js 게시 워크플로 완료
이미지와 메타데이터를 함께 배포하세요
에셋을 만들고 Next.js용 코드를 복사해 배포 결과를 검증하세요.