민프
[Next.js] 기초 5. Routes 그룹화 및 Metadata 본문
Routes 그룹화
Next에서는 URL을 디렉토리 구조로 나타낸다고 하는데 그러면 페이지를 그룹시킬때는 어떻게 해야할까요?
예를 들어서 영화 페이지, 영화 세부 정보 페이지, 영화 배우, 영화 검색 페이지 등등.. 공통 주제의 페이지들은 어떻게 그룹화를 시켜야할까요?
아래 사진과 같이 ('그룹 이름') 이렇게 해놓으면 Routes를 그룹화 해서 Logical Groups으로 만들 수 있습니다
여기에서 Layout.tsx, not-found는 기본적으로 모든 Routes에 공유되기에 app 디렉토리에 속해있어야 합니다!
Metadata
Next.js에서 metadata는 웹 페이지의 메타데이터를 정의하는 객체입니다. 메타데이터는 웹 페이지에 대한 정보를 포함하며, 주로 검색 엔진 최적화(SEO), 소셜 미디어에서의 미리보기, 브라우저 탭 제목 등에 사용됩니다.
metadata는 서버 컴포넌트에서만 있을 수 있습니다!
Metadata의 역할
title: 페이지의 제목을 설정합니다. 이 제목은 브라우저의 탭에 표시되고, 검색 엔진 결과 페이지에서 링크로 사용됩니다.
description: 페이지에 대한 간략한 설명을 제공합니다. 검색 엔진에서 페이지 설명으로 사용되며, 소셜 미디어에서 페이지를 공유할 때 미리보기 텍스트로 표시됩니다.
Next.js에서 metadata는 특정 페이지나 레이아웃에 적용되어, 해당 페이지가 로드될 때 자동으로 HTML <head> 섹션에 포함됩니다. 이를 통해 각 페이지에 맞는 메타데이터를 쉽게 설정할 수 있습니다.
아래 사진을 보시면 설정된 Metadata코드에 맞게 <head> 태그에 나타나있는 것을 확인하실 수 있습니다.
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
페이지 별로 다른 Metadata 설정
Next.js에서는 각 페이지에 별도로 메타데이터를 설정할 수 있습니다. 예를 들어, HomePage와 AboutPage에서 서로 다른 title과 description을 설정해보겠습니다. 이렇게 하면, 각 페이지가 로드될 때마다 해당 페이지에 맞는 메타데이터가 <head>에 자동으로 포함됩니다.
// pages/index.js (HomePage)
export const metadata = {
title: 'Home - My Awesome Next.js App',
description: 'Welcome to the home page of my awesome Next.js app!',
};
export default function HomePage() {
return (
<div>
<h1>Welcome to My Next.js App</h1>
<p>This is the home page content.</p>
</div>
);
}
// pages/about.js (AboutPage)
export const metadata = {
title: 'About Us - My Awesome Next.js App',
description: 'Learn more about us on this page.',
};
export default function AboutPage() {
return (
<div>
<h1>About Us</h1>
<p>This page contains information about our app and team.</p>
</div>
);
}
Metadata의 template
그럼 많은 페이지들에 계속 저 metadata를 넣어줘야 하는데 그건 불필요한 노력이 될 수 있습니다. 그래서 NextJS에서는 metaData를 템플릿화 시켜서 사용할 수 있는데요
아래와 같이 문자열로 된 title을 넣어주고 Next Movies라고 코드를 작성해주면 완성 입니다.
이제 다른 페이지에서 metaData를 아래 사진과 같이 Home이라고 넣어주면 Title은 'Home | Next Movies'라고 나오게 됩니다
참고링크
https://nextjs.org/docs/app/building-your-application/optimizing/metadata
'[Next.js]' 카테고리의 다른 글
| [Next.js] 기초 6. Dynamic Routes (0) | 2024.08.13 |
|---|---|
| [Next.js] 기초 4. Layout System (레이아웃 시스템) (0) | 2024.08.12 |
| [Next.js] 기초 3. 'use client'는 Client에서 Interactive하게 만들어주는 것 (0) | 2024.08.12 |
| [Next.js][기초] 2. NextJS 설치 (수동)NextJS 페이지 루트(Defining Routes) 정의하기 | 새로운 페이지 만들어보기 | Not Found 페이지 만들기 | 네비게이션 바 만들기 (0) | 2024.06.04 |
| [Next.js][기초] 1. NextJS 설치 (수동) (0) | 2024.06.04 |
