손에 익는 Next.js
Part 1 - 공식 문서 훑어보기
Part 1 - 공식 문서 훑어보기
  • 왜 Next.js를 배우는가?
    • 1️Next.js가 세상에 있기까지
    • 2️Next.js를 배우는 이유
  • Next.js 기본 배우기
    • 1️Next.js는 무엇인가?
    • 2️Next.js 13
    • 3️서버 컴포넌트
    • 4️라우팅
    • 5️페이지 간 이동
    • 6️스타일링
    • 7️데이터 페칭
    • 8️메타데이터
  • Next.js 손에 익히기
    • 1️프로젝트 소개
    • 2️프로젝트 환경 설정
    • 3️페이지 구성하기
    • 4️페이지 간 이동하기
    • 5️페이지 스타일 입히기
    • 6️날씨 API 사용하기
    • 7️날씨 데이터 조회하기
    • 8️메타데이터 다루기
    • 9️서비스 배포하기
  • 마치며
    • *️후속 강의에 대하여
Powered by GitBook
On this page
  • 정적 메타데이터
  • 동적 메타데이터
  1. Next.js 기본 배우기

메타데이터

Next.js에서는 메타데이터(Metadata)를 설정하는 두 가지 방법이 있습니다. 설정 기반 메타데이터(Config-based Metadata)와 파일 기반 메타데이터(File-based Metadata)가 그 방법입니다. 이번 강의에서는 설정 기반 메타데이터를 중심으로 다룹니다.

설정 기반 메타데이터 방식에는 정적 방식(Static Metadata)과 동적 방식(Dynamic Metadata)이 있습니다.

정적 메타데이터

정적 방식은 Metadata 객체를 정의하는 방식입니다.

layout.tsx 혹은 page.tsx
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

동적 메타데이터

동적 방식은 generateMetadata라는 함수를 이용해 동적으로 Metadata 객체를 생성하는 방식입니다.

app/blog/[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,
  parent?: ResolvingMetadata
): Promise<Metadata> {
  const id = params.id
  
  const post = await fetch(`https://.../${id}`).then((res) => res.json())
  
  const previousImages = (await parent).openGraph?.images || []
 
  return {
    title: post.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}
 
export default function Page({ params, searchParams }: Props) {}

참고 자료

Previous데이터 페칭NextNext.js 손에 익히기

Last updated 1 year ago

8️
https://nextjs.org/docs/app/building-your-application/optimizing/metadata