Next.js 带变量导入或有条件导入

Question

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

我是 Next.js 的新手并使用模板。

我至少成功地添加了 i18n，我不想重建整个模板和组件... AppClassic 中已经有一个文件提供内容（图片、文本内容等）。我想到的最简单的事情就是复制它，并将这些文件放在不同的子路径中，例如 'en/common/data/AppClassic' 或 'de/common/data/AppClassic' - 然后以某种方式使用动态语言环境常量导入它或有条件地渲染它，所以如果语言环境常量是'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