title pages and ...

src/app/products/[id]/page.tsx

@@ -1,9 +1,10 @@
 import { Suspense } from 'react'
 import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'
 import { detailServiceQueryOptions } from '../hooks/useProductData'
-import { NextPage } from 'next'
+import { Metadata, NextPage } from 'next'
 import DetailService from '../DetailService'
 import Loading from './loading'
+import { ServiceDetailResponse } from '../types/ProductTypes'
 
 interface PageProps {
     params: Promise<{
@@ -11,6 +12,22 @@ interface PageProps {
     }>
 }
 
+
+export async function generateMetadata(
+    { params }: PageProps
+): Promise<Metadata> {
+    const { id } = await params
+    const queryClient = new QueryClient()
+
+    await queryClient.prefetchQuery(detailServiceQueryOptions(id))
+    const service = queryClient.getQueryData(detailServiceQueryOptions(id).queryKey) as ServiceDetailResponse
+
+    return {
+        title: 'مجله داناک' + ' | ' + service.data.danakService.name,
+        description: service.data.danakService.metaDescription,
+    }
+}
+
 const SingleService: NextPage<PageProps> = async ({ params }) => {
 
     const { id } = await params