استيراد مكون دينامكيا عبر dynamic في nextjs

يجب عليك وضع dynamic خارج المكون ، وسيعمل بشكلٍ جيد

const getDynamicComponent = (c) => dynamic(() => import(`../components/${c}`), {
  ssr: false,
  loading: () => <p>Loading...</p>,
});

const Test = () => {
  const router = useRouter();
  const { component } = router.query;
  
  const DynamicComponent = getDynamicComponent(component);

  return <DynamicComponent />
}

يتم إستعمال كلمة dynamic في nextjs على الشكل الموضح في المثال أسفله:

في المثال التالي ، سيتم تحميل الوحدة ../components/hello ديناميكيًا بواسطة الصفحة

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/hello'))

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponent />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

سيكون DynamicComponent هو المكون الافتراضي الذي يتم إرجاعه بواسطة ../components/hello. إنه يعمل مثل مكون React العادي ، ويمكنك تمرير الدعائم إليه كما تفعل عادةً.

يمكنك تطبيق نفس الطريقة في الشيفرة الخاصة بك.