Added: Blog metadata added.

app/blog/[slug]/page.tsx

@@ -1,3 +1,4 @@
+import { Metadata } from 'next'
 import { MDXRemote } from 'next-mdx-remote/rsc'
 import { Suspense } from 'react'
 import rehypePrettyCode from 'rehype-pretty-code'
@@ -11,6 +12,22 @@ export async function generateStaticParams() {
   }))
 }
 
+export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
+  const posts = getBlogs()
+  const post = posts.find((post) => post.slug === params.slug)
+
+  if (!post) {
+    return {
+      title: 'Keep React - Supercharge Your Web Development',
+      description:
+        'Explore our library of 40+ open-source React UI components and interactive elements, empowering you to create stunning web projects effortlessly.',
+    }
+  }
+  return {
+    title: post?.title,
+  }
+}
+
 const page = async ({ params }: { params: { slug: string } }) => {
   const posts = getBlogs()
   const post = posts.find((post) => post.slug === params.slug)

app/blog/page.tsx

@@ -1,6 +1,11 @@
+import { Metadata } from 'next'
 import { getBlogs } from '~/utils/getMdxContent'
 import Blog from '../components/Blog'
 
+export const metadata: Metadata = {
+  title: 'Blog || Keep React',
+}
+
 const page = () => {
   const blogs = getBlogs()
   return (

utils/getMdxContent.ts

@@ -16,7 +16,11 @@ export const getBlogs = () => {
 
     return {
       slug: fileName.replace(/\.mdx$/, ''),
-      ...data,
+      title: data?.title,
+      tag: data?.tag,
+      date: data?.date,
+      version: data?.version,
+      author: data?.author,
       content,
     }
   })