feat: generateMetadata

daangn · Jul 24, 2024 · de0f484 · de0f484
1 parent 438249f
commit de0f484
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/component-docs/app/contents/[slug]/page.tsx b/component-docs/app/contents/[slug]/page.tsx
@@ -1,6 +1,8 @@
 import { allContents } from "contentlayer/generated";
 import { getMDXComponent } from "next-contentlayer2/hooks";
 
+import type { Metadata } from "next";
+
 interface ContentPageProps {
   params: {
     slug: string;
@@ -9,13 +11,33 @@ interface ContentPageProps {
 
 async function getContentFromParams({ params }: ContentPageProps) {
   const slug = params.slug;
-  const doc = allContents.find((doc) => doc.slug === slug);
+  const content = allContents.find((content) => content.slug === slug);
 
-  if (!doc) {
+  if (!content) {
     return null;
   }
 
-  return doc;
+  return content;
+}
+
+export async function generateMetadata({ params }: ContentPageProps): Promise<Metadata> {
+  const content = await getContentFromParams({ params });
+
+  if (!content) {
+    return {};
+  }
+
+  return {
+    title: content.title,
+    openGraph: {
+      title: content.title,
+      type: "article",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: content.title,
+    },
+  };
 }
 
 export async function generateStaticParams(): Promise<ContentPageProps["params"][]> {

diff --git a/component-docs/app/layout.tsx b/component-docs/app/layout.tsx
@@ -5,10 +5,7 @@ import { Header } from "../components/Header";
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="ko">
-      <head>
-        <title>Contentlayer Next.js Example</title>
-        <link rel="icon" type="image/x-icon" href="/favicon.png" />
-      </head>
+      <head />
       <body>
         <Header />
         <div className="px-6">{children}</div>