Next.js 使用变量导入或有条件地导入

Question

import { keyFeatures } from 'common/data/AppClassic';

我是 Next.js 的新手，正在使用模板。

我至少成功地添加了 i18n，我不想重建整个模板和组件...AppClassic 中已经有一个文件可以提供内容（图片、文本内容等） .我想到的最简单的事情就是复制它，并将这些文件放在不同的子路径中，例如 'en/common/data/AppClassic' 或 'de/common/data/AppClassic' - 然后以某种方式使用动态区域设置 const 导入它或有条件地渲染它，所以如果locale const 为 'en' 则导入一个文件，但如果 const 为 'de'，则导入另一个文件。

  const router = useRouter();
  const { locale } = router;
    import { keyFeatures } from { locale } + '/common/data/AppClassic';

有没有办法做类似的事情，如果有的话，你能提供一些例子吗 - 因为我实际上不知道我在做什么。

非常感谢。

Answer 1

您可以按照自己的方式使用 Next.js 动态导入，例如示例：

import dynamic from 'next/dynamic'

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

有关更多信息，请查看他们的官方文档： https://nextjs.org/docs/advanced-features/dynamic-import

Next.js 使用变量导入或有条件地导入

Next.js import with variables or conditionally import

javascript

jsx

reactjs

next.js