Dynamically load a component

TypeScriptNext.JS

./Page.tsx

import dynamic from "next/dynamic";
 
const DynamicComponent = dynamic<{}>(
  () => import("@/components/Test").then((mod) => mod.Test),
  { loading: () => <>Loading...</> }
);
 
const Page = () => (
  <>
    <DynamicComponent />
  </>
);
 
export default Page;

./components/Text.tsx

import { use } from "React";
 
const getName = async () => {
	/* Do something */
	return "Hello, world";
}
 
export const Test = () => {
  const name = use(getName()); /* Using "use" instead of "await" */
  return (
    <>
      Hello, world!
    </>
  );
};

Snippets/Dynamically load a component