손에 익는 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 손에 익히기

메타데이터 다루기

Previous날씨 데이터 조회하기Next서비스 배포하기

Last updated 1 year ago

에서 배웠던 내용을 토대로 날씨 앱의 메타데이터를 바꿔보겠습니다.

정적 메타데이터

항상 고정된 메타데이터를 지정하는 건 metadata 객체를 정의하는 것으로 해결됩니다.

app/layout.tsx
export const metadata: Metadata = {
  title: '날씨 앱',
  description: 'Next.js로 만든 날씨 앱',
}

동적 메타데이터

데이터에 따라 다른 메타데이터를 지정하기 위해선 generateMetadata라는 이름의 함수를 정의하면 됩니다. 함수 내에서 fetch 함수를 이용해 데이터를 가져올 수도 있으니 원하는 어떤 문구든 만들 수 있습니다.

app/[location]/page.tsx
export function generateMetadata({ searchParams }: Props): Metadata {
  return {
    title: `${searchParams.name}의 3일 예보`,
    description: `${searchParams.name}의 3일 예보를 알려드립니다`,
  }
}

주요 기능은 완성됐습니다. 이제 서비스를 배포해보겠습니다.

8️
메타데이터