single service + 404 page and 500 page

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

@@ -1,9 +1,39 @@
-import React from 'react'
+import { Suspense } from 'react'
+import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'
+import { detailServiceQueryOptions } from '../hooks/useProductData'
+import { NextPage } from 'next'
+import DetailService from '../DetailService'
+import Loading from './loading'
+
+interface PageProps {
+    params: Promise<{
+        id: string
+    }>
+}
+
+const SingleService: NextPage<PageProps> = async ({ params }) => {
+
+    const { id } = await params
 
-const page = () => {
     return (
-        <div>page</div>
+        <Suspense fallback={<Loading />}>
+            <SingleServicePage id={id} />
+        </Suspense>
     )
 }
 
-export default page
+async function SingleServicePage({ id }: { id: string }) {
+    const queryClient = new QueryClient()
+
+    await Promise.all([
+        queryClient.prefetchQuery(detailServiceQueryOptions(id)),
+    ])
+
+    return (
+        <HydrationBoundary state={dehydrate(queryClient)}>
+            <DetailService id={id} />
+        </HydrationBoundary>
+    )
+}
+
+export default SingleService