next-best-practices

النتيجة المتوقعة:

Based on your code, you do NOT need 'use client' here. This component only receives data via props and renders JSX without any browser APIs. Adding 'use client' would unnecessarily increase your client bundle size.

Keep it as a Server Component unless you need:
- useState, useEffect, or other React hooks
- Browser APIs like window or document
- Event handlers like onClick
- Client-side data fetching

النتيجة المتوقعة:

Your params typing is incorrect for Next.js 15+. Update it to:

type Props = {
params: Promise<{ slug: string }>
}

export default async function Page({ params }: Props) {
const { slug } = await params
// ...
}

The params prop is now a Promise that must be awaited. This change enables partial prerendering and improves performance.

النتيجة المتوقعة:

Your hydration error is caused by using Date.now() in your component. The server and client render different timestamps.

Solutions:
1. Use 'use client' if the date display is not critical for SEO
2. Use suppressHydrationWarning for timestamps
3. Render the date only on the client with useEffect

Example fix:
const [date, setDate] = useState<string>()
useEffect(() => setDate(new Date().toISOString()), [])

This ensures the date only renders on the client.