كيفية إصلاح أخطاء "عدم تطابق الترطيب" في Next.js 15

المشكلة

Error: Hydration failed because the initial UI does not match
what was rendered on the server.

لماذا يحدث هذا

يختلف HTML المُصيَّر من الخادم عن HTML المُصيَّر من العميل. الأسباب الشائعة:

• تنسيق التاريخ/الوقت
• واجهات خاصة بالمتصفّح فقط
• قيم عشوائية
• بيانات خاصة بالمستخدم

الحل 1: كبح تحذير الترطيب

// For timestamps
<time suppressHydrationWarning>
    {new Date().toLocaleString()}
</time>

الحل 2: useEffect للشيفرة الخاصة بالعميل

'use client';

import { useState, useEffect } from 'react';

export default function ClientTime() {
    const [time, setTime] = useState('');

    useEffect(() => {
        setTime(new Date().toLocaleString());
    }, []);

    if (!time) return null; // or skeleton

    return <span>{time}</span>;
}

الحل 3: الاستيراد الديناميكي مع ssr: false

import dynamic from 'next/dynamic';

const ClientOnlyChart = dynamic(
    () => import('./Chart'),
    { ssr: false }
);

الحل 4: التحقّق من بيئة المتصفّح

'use client';

export default function BrowserOnly({ children }) {
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true);
    }, []);

    if (!mounted) return null;

    return children;
}

أفضل الممارسات

• أبقِ مكوّنات الخادم افتراضية
• استخدم 'use client' فقط عند الحاجة
• انقل واجهات المتصفّح إلى useEffect
• استخدم تنسيق تاريخ متّسقاً