Nextjs 가 버전이 올라가면서 제일 좋았다고 느낀것은 개인적으로 Metadata 주입 관련된것이었습니다.
기존 page route 방식에선 page route 안에서 index.tsx 컴포넌트에 <Head> 태그를 직접 넣어야했어서 이것이 UI컴포넌트인지 아니면 SEO를 위한 컴포넌트인지 헷갈릴 수 가 있습니다.
Next.js 13 버전으로 올라오면서 app directory 를 사용하면서 이부분은 어느정도 해결이 된 것 같습니다.
Nextjs 를 app route로 선택하고 create next app을 하면 생성되는 layout.tsx 파일입니다.
app 폴더안 최상단에는 무조건 루트레이아웃이 존재해야하며 이 루트레이아웃이 기존 _document.tsx,_app.tsx 를 대체합니다.
export const metadata = {
title: "QWERO - NFT Market Place",
description: "Generated by create next app",
};이것을 MetadataAPI 라고 부릅니다. 이 API 는 서버컴포넌트에서만 사용 가능합니다.
보시는것과 같이 return 문안에 <Head> 태그없이 잘 적용이 된 모습입니다.
동적으로 메타데이터 적용해보기
저는 현재 NFT 거래소를 만들어보고있는데 NFT 특징상 아이템이 최소 수십개 많개는 수천 수만개까지 아이템이 있습니다. 이를 하나하나 Metadata 를 적용하기엔 어려울텐데요 동적으로 Metadata를 생성하고 적용해주는 법이 있습니다.
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
import { Metadata } from "next";
import { getNFTInfoDetail } from "@/api/CollectionAPI";
interface ParamsType {
collectionContract: string;
tokenId: string;
}
export async function generateMetadata(
{ params }: { params: ParamsType },
): Promise<Metadata> {
const { tokenId, collectionContract } = params;
const info = await getNFTInfoDetail(collectionContract, tokenId);// 데이터 fetch
return {
title: `${info.name} - ${info.collection_name} | QWERO`,
description: info.collection_name,
openGraph: {
images: [info.image],
title: info.name,
description: `Get Your NFT Right Now! - ${info.collection_name}`,
siteName: "QWERO",
},
};
}동적 Metadata를 원하는 루트에 위 함수 generateMetadata 를 정의해주고 사용해주면 됩니다.
동적 Metadata 에 들어갈 데이터를 fetch 해주고 fetch해온 data를 자동으로 적용시켜주게됩니다.
Nextjs 13 버전으로 올라오면서 좋다 안좋다 아직 말이많지만 사용하는사람들이 늘고 커뮤니티가 커진다면 확실히 12버전보단 좋을것같습니다!
또한 Next 팀의 궁극적인 목표는 page route 를 없애고 app route 하나로 통일하는것을 목표로 알고있는데 미리 미리 적응해두면 나쁠건 없을것같습니다.
'Next.js' 카테고리의 다른 글
| Next.js Intercepting Routes 를 활용한 Modal 구현 (0) | 2023.11.12 |
|---|---|
| Next.js 14 App Router 가이드를 통한 Dashboard 구현 (0) | 2023.10.28 |
| Nextjs - Link 태그의 Prefetch 기능 (0) | 2023.06.29 |
| Next.js - Nextjs 13 정리 (1) (0) | 2023.06.20 |
| 서버 사이드 렌더링(SSR) vs 클라이언트 사이드 렌더링(CSR) (0) | 2023.04.13 |
