Copy export const metadata = {
title : '제목!' ,
description : '설명..' ,
openGraph : {
title : '제목' ,
// ...
} ,
};
export default function RootLayout ({
children ,
} : Readonly <{ children : React . ReactNode }>) {
return (
< html lang = "ko" >
< body >
< Header />
{children}
</ body >
</ html >
);
}
Copy export const metadata : Metadata = {
title : {
template : '%s | Next Movies' ,
default : 'Next Movies' ,
} ,
description : 'He best movies on the best framework' ,
};
Copy import { Metadata , ResolvingMetadata } from 'next'
type Props = {
params : { id : string }
searchParams : { [key : string ] : string | string [] | undefined }
}
export async function generateMetadata (
{ params , searchParams } : Props ,
parent : ResolvingMetadata
) : Promise < Metadata > {
// read route params
const id = params .id
// fetch data
const product = await fetch ( `https://.../ ${ id } ` ) .then ((res) => res .json ())
// optionally access and extend (rather than replace) parent metadata
const previousImages = ( await parent). openGraph ?.images || []
return {
title : product .title ,
openGraph : {
images : [ '/some-specific-page-image.jpg' , ... previousImages] ,
} ,
}
}
export default function Page ({ params , searchParams } : Props ) {}
Copy import { Roboto } from 'next/font/google' ;
export const roboto = Roboto ({
subsets : [ 'latin' ] , // 사용할 폰트 집합
weight : [ '400' , '700' ] , // 사용할 폰트 두께
display : 'swap' , // 폰트 다운로드 전까지 기본 폰트 표시(성능 최적화)
variable : '--font-roboto' , // 사용할 CSS 변수 이름
});
Copy import { roboto } from '@/styles/fonts' ;
export default function Headline () {
return (
<>
< h1 className = { roboto .className}>OMDb API</ h1 >
</>
);
}
Copy /* globals.css */
body {
font-family : var (--font-roboto) ;
}
Copy import { roboto } from '@/styles/fonts' ;
import '@/styles/global.scss' ;
export default function RootLayout ({
children ,
} : Readonly <{
children : React . ReactNode ,
}>) {
return (
< html lang = "ko" className = { ` ${ roboto .variable } ` }>
< body >{children}</ body >
</ html >
);
}