NextJS中如何正确导入动态组件？（WordPress灵活内容场景）

问题根源 #

你的代码存在三个核心问题，导致了语法错误和运行异常：

1. 动态导入路径不完整：import(''+layoutName)未指定组件所在目录路径，Next.js无法定位组件文件
2. JSX返回多根元素：return中同时返回<h1>和<FlexLayout />，违反React单根元素规则
3. 缺少唯一key属性：循环渲染的元素未添加key，会触发React警告

修正后的代码示例 #

假设所有Flex布局组件都存放在components/layouts/目录下，且组件文件名与layoutName完全匹配（大小写敏感），代码调整如下：

import dynamic from 'next/dynamic';

// ... 其他导入和业务逻辑

return (
  <Layout>
    <WebsiteJsonLd siteTitle={title} />
    {flexible.map((layout, index) => {
      const layoutName = layout.__typename.replace('Page_Acf_Flexiblecontent_', '');
      // 补全组件路径，动态导入对应布局组件
      const FlexLayout = dynamic(() => import(`../components/layouts/${layoutName}`));

      // 用容器包裹多元素，添加唯一key
      return (
        <div key={index}>
          <h1>{layoutName}</h1>
          {/* 将WordPress返回的布局数据传入组件 */}
          <FlexLayout data={layout} />
        </div>
      );
    })}
  </Layout>
);

额外注意事项 #

• 命名导出组件处理：如果组件是命名导出（而非默认导出），需修改动态导入逻辑：

  const FlexLayout = dynamic(() => 
    import(`../components/layouts/${layoutName}`).then(mod => mod[layoutName])
  );
  

• 路径正确性：确认../components/layouts/是相对于当前index.js的正确路径，根据项目目录结构调整
• 大小写匹配：确保layoutName与组件文件名完全一致（比如WordPress返回Hero，组件文件需为Hero.js/Hero.tsx）

内容的提问来源于stack exchange，提问作者Alex Kinejara