Metadata
Metadata란?
- 웹 페이지의 정보를 정의하는 데이터
- 주로 HTML 문서의
<head>태그 내에 위치 - 검색 엔진 최적화(SEO), 소셜 미디어 공유, 브라우저의 탭 제목 및 기타 사용자 인터페이스 요소에서 웹페이지를 표현
(src/)app/layout.js
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
note
Next.js를 설치 후, app의 layout.js를 확인하면 볼 수 있는 코드이다.
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
위와 같이 layout.js 혹은 page.js에서 정적 metadata를 설정할 수 있다.
Metadata 설정
정적 Metadata 설정
metadata변수를 이용하여 직접 값을 입력
(src/)app/page.js
import Link from "next/link";
export default function Home() {
return <Link href="/info">페이지 이동</Link>;
}
(src/)app/layout.js
import "./globals.css";
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body style={{ width: "100vw", height: "100vh" }}>{children}</body>
</html>
);
}
(src/)app/info/page.js
export const metadata = {
title: "title: 정보 페이지~",
description: "description: 정보 페이지 입니다~",
};
export default function InfoPage() {
return <>정보 페이지 입니다~</>;
}
note
Next.js를 실행시키면 위와 같은 화면이 출력된다.
초기 metadata 중 title 값인 Create Next App이 확인된 것을 볼 수 있다.
app의 page.js에서 Link를 통해 info페이지에 진입했을 때의 화면이다.
info의 page.js에도 정적 metadata 변수를 생성하였다.
위와 같이 title: 정보 페이지~가 출력된 것 을 확인할 수 있다.
동적 Metadata 설정
- 웹 페이지의 콘텐츠나 사용자의 특정 요청에 따라 메타 정보를 변경해야 할 때 사용
- Next.js에서 제공하는 generateMetadata함수를 이용하여 metadata를 동적 생성
(src/)app/page.js
import Link from "next/link";
export default function Home() {
return <Link href="/10">페이지 이동</Link>;
}
(src/)app/[slug]/page.js
export async function generateMetadata({ params }) {
const id = params.slug;
const response = await fetch(
`https://jsonplaceholder.typicode.com/todos/${id}`
);
const todo = await response.json();
return {
title: `${todo.title} - ${todo.id}`,
};
}
export default function DynamicPage({ params }) {
return <>동적 페이지: {params.slug}</>;
}
note