jh.nrtv

Next.js 13에 metadata 설정하기 본문

Next.js

Next.js 13에 metadata 설정하기

wlgus3 2023. 7. 19. 18:45

Next.js 13.4.1 로 진행중인 프로젝트에서 메타데이터를 설정하고자 한다. 

 

먼저 'Next.js에 메타데이터 설정하기' 등의 키워드로 검색하면 가장 보편적으로 소개하는 방법이 있다.

 

✅ 가장 보편적인 방법 - import <Head> from 'next/head'

React.js의 CRA로 만든 앱은 index.html이 존재하기 때문에 <head> 태그 내에서 <title> 태그를 바꿔야 한다.  

하지만 Next.js의 create-next-app의 경우에는 index.html 파일이 존재하지 않는데 

따라서 조금 다른 방법으로  <head>태그를 조작해야 한다. 

 

/pages/_app.js

import Head from "next/head";

function MyApp({ Component, pageProps }) {
  return (
    <>
      {/* 메타데이터 변경 */}
      <Head>
        <title>프로젝트 이름 </title> 
        <meta name="description" content="이 프로젝트는 ~~한 프로젝트 입니다." />
        <link rel="shortcut icon" href="/favicon.ico" />
      </Head>
      
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

위와 같이 'next/head'에서 <Head>태그를 임포트 하고 

그 안에서 <title> 이나 <meta>태그를 조작한다.

_app.js 말고도 각각의 page.js 에서도 위의 방법으로 변경이 가능하다고 한다. 

 

[정직하게 배워보는 Next.js] Next.js에서 head 태그를 조작하는 멋진 방법

해당 블로그 시리즈는 정직하게 배워보는 Next js 시리즈로써 총 10부작으로 이루어져 있습니다. Next.js공식 홈페이지에서 이야기하는 내용을 최대한 이해하기 쉽고 직관적이게 구성하였습니다. 0.

wonit.tistory.com

하지만 next.js 13버전 이상을 사용하는 나에게는 이 방법이 작동되지 않았다. 

 

 

 

 

 

✅ Next 13.xx에 Static metadata 적용 - import { Metadatat } from 'next'

더 찾아보니 어떤 게시글에서 13 버전 이상부터 새로운 메타데이터 방식이 도입되었다고 한다. 

그 형식은 아래와 같다. 

 

import { Metadata } from "next";


//! next.js 13 부터 기본적으로 metadata가 아래와 같은 형식으로 포함되어있음
export const metadata: Metadata = {
  title: "프로젝트 이름 ",
  description: "프로젝트 설명 ",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      ...
        
      <body className={inter.className}>
        <div className="wrap">
          <Header />
          <div className="page">{children}</div>
          <Footer />
        </div>
      </body>
    </html>
  );
}

기본적인 사용법은 layout.tsx나 page.tsx 등의 파일에서 Metadata Object를 'next'에서 임포트 후 사용한다. 

각 페이지의 page.tsx에서 다르게 적용한다면 메타데이터도 달라져서 SEO에 기여할 수 있다.

 

 

최초에 프로젝트를 생성하면 아래와 같은 기본 메타데이터가 layout.tsx에  포함되어 있는데 이유는 모르겠으나 아래와 같이import {Metadata} 없이 작동시켜도 정삭 작동됨을 확인할 수 있다. 

export const metadata = {
  title: "UpperNightProject",
  description: "심야영업 카페를 모아놓은 지도입니다.",
};

 

 

✅ Next 13.xx에 Dynamic metadata 적용 -  metadata생성 함수 선언하기

동적으로 메타데이터를 설정하는 것도 가능한데, 예를 들어 아래와 같이 상품 상세페이지에서  상품의 이름을 title 태그 안에 넣을 때에는 

<title>Product - Camera</title>

아래와 같이 product 정보를 받은 후에 title을 설정하는 함수(generateMetadata)를 만들어서 사용하면 된다. 

import { Metadata } from "next";

type Props = {
  params: { productId: string };
};

export const generateMetadata = async (
  props: Props
): Promise<Metadata> => {
  const { params } = props
  const product = await fetchProductById(params.productId)
  return {
    title: product.title,
  };
};

 

 

 

 

 

참조링크 

 

 

Routing and SEO Metadata in Next.js 13

Learn how to leverage the Metadata API to enhance routing metadata and improve SEO in Next.js 13.

www.builder.io

 

 

'Next.js' 카테고리의 다른 글

Next.js 프로젝트에 Quill Editor 사용하기  (0) 2023.07.25
Next.js Server Component 에서 페이지네이션 구현하기  (0) 2023.07.22
'Next.js' Related Articles more