next13에서 head에 title을 변경하려고하니 방법이 많이 바뀌었습니다. 그리고 SSR, CSR에 title을 변경해주는 방식들이 다양해서 관련한 방법들을 정리해보았습니다.
해당 글에서는 title만을 설정해주고 있으나, 기타 head에 들어가는 값들은 필요한대로 넣어주면됩니다.
<aside> 💡 테스트 코드 https://github.com/osydoo/next13-head
</aside>
Next13으로 넘어오면서 기존에 사용하던 방식이 아닌 Medata를 export하는 방식으로 title을 설정해줍니다.
import Head from 'next/head';
/**
* title이 변하지 않습니다.
* @returns
*/
export default function Page() {
return (
<div>
<Head>
<title>default title</title>
</Head>
default page
</div>
)
}
만약 모든 페이지에 일괄적으로 Head를 설정해주고 싶다면, Next13에서 나온 layout.tsx에서 export 해주면 됩니다.
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
export const metadata = {
title: 'Layout Title',
}
특정 페이지에서는 head의 값을 다르게 해주는 경우도 있습니다. 이럴 땐 metadata를 각 페이지에서 export 해주면 됩니다. 이럴 시 Layout.tsx에서 export된 값을 무시하고 page에서 설정한 값으로 노출됩니다.
export default function Page() {
return (
<div>
default page
</div>
)
}
export const metadata = {
title: 'Next13 Page Title'
}
dynamic route나 query를 통해서 head의 값들을 설정해줄 수 있습니다.
export default function Component() {
return (
<div>
next13
</div>
)
}
type Props = {
params: { id: string };
searchParams: { [key: string]: string | string[] | undefined };
};
// next13/main?query=url
export async function generateMetadata ({params, searchParams}: Props) {
const {id} = params;
return {
title: id + searchParams.query
}
};