Next.js의 메타데이터(Metadata)

이번에는 Next.js의 메타데이터에 대한 이야기를 할 것이다. 우리가 HTML를 배울 때, 메타데이터를 기입해서 SEO을 최적화하는 부분을 했었다. 리액트에서는 메타데이터를 세팅하는 것이 "매우" 힘들다. (불가능한 건 아니다. 다 방법이 있다. 그게 복잡해서 문제...)
Next.js에서는 메타데이터를 지원해 준다. 편하게 메타데이터를 세팅하면 된다.

공식 문서

공식 문서는 다음과 같다. 참고하자.
https://nextjs.org/learn/dashboard-app/adding-metadata

App Router: Adding Metadata | Next.js

---

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

Optimizing: Metadata | Next.js

+ (관련 문서)
https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://reactnext-central.xyz/blog/nextjs/metadata&ved=2ahUKEwiM5ee3k66MAxU0bvUHHTTEA04QFnoECB8QAQ&usg=AOvVaw0FWA99i7hPHAmZTXyAtVrT

https://www.google.com/url?opi=89978449&rct=j&sa=t&source=web&url=https%3A%2F%2Freactnext-central.xyz%2Fblog%2Fnextjs%2Fmetadata&usg=AOvVaw0FWA99i7hPHAmZTXyAtVrT&ved=2ahUKEwiM5ee3k66MAxU0bvUHHTTEA04QFnoECB8QAQ

https://www.recodelog.com/blog/next/metadata

Next js 14+ SEO 설정하기 - Metadata title, description 설정방법

 

---

노마드코더 영상

https://www.youtube.com/watch?v=HPPCTO0tZi8

---

관련 예시 심플 코드 >

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