الـ SearchParams فى Next.js15 ومشكلة لابد أن تنتبه لها

[x32x01]

وانا شغال على بروجكت بـ Next.js 15 مع TypeScript ، وعامل كود مهمته بس انه بيبعت الـ searchParams لصفحة المنتجات، وكل حاجة ماشية تمام. فجأة لقيت إن الكود اللي متأكد انه كان شغال على Next.js 14 خارب الدنيا ايرورز!

بعد شوية سيرش وتجارب اتضحلى إن المشكلة في Next.js 15، الـ searchParams فى الاصدار الـ15 بقت Promise بدل ما تكون Object عادي، يعني بقى لازم أتعامل معاها بـ await علشان اقدر اوصل لنتيجة الكود النهائية.

الكود القديم:

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

الكود كان شغال زي الفل على Next.js 14، لكن في 15 بيطلع Error وبيرجع القيم undefined.

الحمدلله قدرت أحل المشكلة بعد ما رجعت للـ Docs (وده درس كبير بحد ذاته )، فهمت إن لازم أعمل await لـ searchParams عشان أتعامل معاها بشكل صحيح.

ودا الكود الجديد:

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} />
    </>
  );
}

طبعا التجربة الصغيرة دي خدت منى وقت كبير ف السيرش عشن اقدر اوصل وافهم المشكلة وحلها وهنا نستفيد إن لازم نتابع تحديثات الفريمورك اللي بتستخدمه أول بأول.
Docs مش بس مكان للكود، دي كنز بيفهمك ليه الحاجة تغيرت وبتساعدك تحل مشاكل زي دي أسرع.

سؤالي ليك:
إيه أكتر مرة وقفت في مشكلة بسبب تحديث framework معين؟ شاركني تجربتك!