السلام عليكم لدى مشكلة فى الحصول على الداتا من url next js

لاحظ عند إرسال البيانات في عنوان URL، يتم ترميز بعض الأحرف الخاصة مثل "@" وغيرها لتفادي المشاكل المحتملة في العنوان، بالتالي يجب فك ترميز الأحرف للحصول على البيانات بشكل صحيح.

عليك استخدام decodeURIComponent لفك ترميز البيانات المستلمة من عنوان URL، كالتالي:

import { useParams } from 'next/navigation';


const MyComponent = () => {
  const param = useParams();
  const decodedEmail = decodeURIComponent(param.slug[0]);
  console.log(decodedEmail); 


  return (
    <div>
      <p>Email: {decodedEmail}</p>
    </div>
  );
};


export default MyComponent;

عادة، عند استخدام useParams في Next.js للحصول على البيانات من الـ URL، من المحتمل أن تواجه مشكلة ترميز، حيث يتم ترميز الأحرف الخاصة مثل "@" إلى "%40" يمكن استخدام decodeURIComponent لفك ترميز البريد الإلكتروني إلى شكله الصحيح لكن يجب أن تتأكد من أن slug يتم تمريره بشكل صحيح من خلال الـ URL وأنه يحتوي على البريد الإلكتروني المشفر.

لكن توجد طريقة أخرى وهي من خلال استخدام مكتبة query-string التي تسهل التعامل مع الاستعلامات في URL.

أولا، عليك تثبيت المكتبة:

npm install query-string

ثم يمكنك استخدامها كما يلي:

import { useRouter } from 'next/router';
import queryString from 'query-string';
const MyComponent = () => {
  const router = useRouter();
  const { slug } = router.query;

  if (slug) {
    const parsedQuery = queryString.parse(slug.join('/'));
    const email = parsedQuery.email;
    console.log(email);
  }
  return (
    <div>
      {/* باقي الكود */}
    </div>
  );
};
export default MyComponent;

نستخدم هنا queryString.parse لفك ترميز الاستعلامات في URL والحصول على البريد الإلكتروني بشكل صحيح.