Web Project/blog

head component

hmmmmmmmmmmmm 2024. 6. 8. 20:04

 

 

 

 

페이지 별로 다른 메타데이터 설정

 

 

 

components > common > AppHead.tsx

import Head from "next/head";

interface Props {
    title?: string
    desc?: string
};

export const APP_NAME = 'Dev Blogs'

export default function AppHead({ title, desc }: Props) {
    return (
        <Head>
            <title>
                {title ? (
                    title + " | " + APP_NAME
                ): APP_NAME}
            </title>
            <meta 
                content={desc}
                name="description"
            />
        </Head>
    )
}

 

 

 

components > layout > AdminLayout.tsx (어드민 최상위)

interface Props {
    children: ReactNode
    title?: string
}

export default function AdminLayout({ title, children }: Props): JSX.Element {
    return (
        <>
            <AppHead title={title} />
            .
            .
            .
        </>
    );
}

 

 

 

pages > admin > post > create.tsx (게시물 생성 페이지)

import Editor from "@/components/editor";
import AppHead from "@/components/common/AppHead";

export default function Create() {
    return (
        <>
            <AppHead title="New Post" />
            <div className="max-w-4xl mx-auto p-4">
                <Editor 
                    onSubmit={(post) => {
                        console.log(post);
                    }}
                />
            </div>
        </>
    );
}