حل مشكلة searchParams في Next.js 15

‍ مشكلة searchParams في Next.js 15 وحلها​

لو اشتغلت قبل كده على Next.js 14 فغالبًا هتفهم إحساسي لما الكود اللي كان شغال تمام بدأ ينهار بعد التحديث لـ Next.js 15

كنت بشتغل على مشروع بـ TypeScript، ومهمتي بسيطة جدًا - أبعت الـ searchParams لصفحة المنتجات.
كل حاجة كانت ماشية زي الفل… لحد ما التحديث الجديد قلب الموازين!

الكود القديم اللي كان شغال​

الكود ده كان تمام على Next.js 14

async function ProductsPage({
searchParams,
}: {
searchParams: { layout?: string; search?: string };
}) {
const layout = searchParams.layout || 'grid';
const search = searchParams.search || '';

return (
<> <ProductsContainer layout={layout} search={search} />
</>
);
}

لكن فجأة في الإصدار الجديد 15 ظهر Error والقيم كلها رجعت undefined!

فين المشكلة بالضبط؟​

بعد شوية بحث وتجارب، اكتشفت إن السبب إن Next.js 15 غيّر طريقة التعامل مع searchParams.
دلوقتي بقيت Promise بدل Object، يعني لازم نستخدم await علشان نوصل للقيم.

الحل النهائي - الكود الجديد​

الحل بسيط، بس مهم جدًا

async function ProductsPage({
searchParams,
}: {
searchParams: Promise<{
layout?: string | undefined;
search?: string | undefined;
}>;
}) {
const layout = (await searchParams).layout || 'grid';
const search = (await searchParams).search || '';

return (
<> <ProductsContainer layout={layout} search={search} />
</>
);
}

ملحوظة مهمة:
الفرق الأساسي إننا استخدمنا await searchParams عشان نفك الـ Promise ونتعامل مع القيم الحقيقية.

الدرس المستفاد​

اللي حصل خلاني أتعلم حاجة مهمة جدًا
“Docs مش مجرد كود.. ده كنز بيفهمك ليه الحاجة اتغيرت وبيوفر عليك وقت ومجهود كبير.”

تابع تحديثات الفريمورك أول بأول، لأن التغييرات الصغيرة دي ممكن تعمل فرق ضخم في الكود بتاعك.