Hola a todos, seguí el siguiente tutorial https://nextjs.org/docs/advanced-features/dynamic-import y funciona muy bien para components
Pero necesito obtener datos dinámicamente. Situación:
Tengo un componente simple llamado MyItems que recibe como items de utilería, que es una lista de elementos, título, categoría.
Quiero importar dinámicamente estas listas desde archivos mecanografiados almacenados en page-data/myitems/de|en.ts, etc.
Entonces, estos archivos ts exportan la matriz después de hacer algunos cálculos, por eso no importo json dinámicamente ni busco otra solución. Necesito que tengan código y exporten una matriz de export default [{name: 'somename', title: somemagic()]
Tengo esta página en pages/page
const Page = async ({ t, ...props }: Props) => { const locale = props._nextI18Next.initialLocale; const items = (await import(`../page-data/myitems/${locale}`)).default; console.log(items); // HERE I SEE OUTPUT FINE return ( <> <Head> <title>dynamic test</title> </Head> {/*@ts-ignore*/} <MyPage items={items} /> </> ); };El error que recibo es que no puedo devolver la promesa de reaccionar. Así que entiendo que no puedo exportar el componente asíncrono.
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.Todo está bien, así que mi pregunta es ¿cómo puedo resolver esta situación entonces?
El objetivo sigue siendo el mismo (los elementos se obtienen bien ahora, pero el componente se devuelve como promesa debido a la sincronización y el resto de la magia de reacción falla)