can i use dynamic import with for loop in next.js?

Question

I'm going to use dynamic import when I need to bring in a lot of components. In this situation, is it possible to use 'for' loop?

import dynamic from "next/dynamic";

let Dynamic = [];

for (let i = 1; i < 80; i++) {
  const DynamicComponent = dynamic(() =>
    import(`../src/Templates/BlendyTemplate${i}`)
  );
  Dynamic.push(DynamicComponent);
}

//this is just example..
const Home = () =>{

const [state,setState] = useState(0);

let DynamicComponents = Dynamic[state]

return <div>
<button onClick={()=>{setState(state+1)}}
<DynamicComponents/></div>
}

export default Home;

Have never tried but I don't think there's any reason it shouldn't work, but this won't be useful at all coz you have imported all components which defeats the purpose of dynamic component. — prograk, Mar 07 '22 at 09:49

score 1 · Accepted Answer · answered Mar 07 '22 at 09:51

No you cannot generate the path dynamically:

Note: In import('path/to/component'), the path must be explicitly written. It can't be a template string nor a variable. Furthermore the import() has to be inside the dynamic() call for Next.js to be able to match webpack bundles / module ids to the specific dynamic() call and preload them before rendering. dynamic() can't be used inside of React rendering as it needs to be marked in the top level of the module for preloading to work, similar to React.lazy.

source

can i use dynamic import with for loop in next.js?

1 Answers1