接下来14国际化

Question

我正在尝试将内部化和本地化添加到我的 Next 14 应用程序中。我的文件夹结构如下：

Root folder
- app
-- [lang]
----- layout.js
----- page.js
----- global.css
-- public
----- logo.svg
----- fonts
-------- fonts-woff2-files

当我引用 app/[lang]/page.js 中公共文件夹中的任何文件时，该文件不会加载。我无法引用任何静态文件，例如图像和字体等。

<Image
 src="/logo.svg"
 alt="Vercel Logo"
 className={styles.brandLogo}
 width={100}
 height={24}
 priority
/>

在这种情况下引用静态文件的正确方法是什么

<Image
 src="/logo.svg"
 alt="Vercel Logo"
 className={styles.brandLogo}
 width={100}
 height={24}
 priority
/>

但它不起作用

Answer 1

将

public

目录放入项目根目录：

Root folder
├── app
│   └── [lang]
│       ├── layout.js
│       ├── page.js
│       └── global.css
└── public
    ├── logo.svg
    └── fonts
        └── fonts-woff2-files

Next.js 可以在根目录中名为

public

的文件夹下提供静态文件，例如图像。然后，您的代码可以从基本 URL (

public

) 开始引用

/

内的文件。

访问静态资产页面了解更多详细信息。

此外 - 这是 Vercel 的 i18n 示例，它展示了如何在应用程序目录中执行 i18n。