在本文中，我们将探索一款显示来自 Unsplash 的街头摄影图像的多语言应用程序。我们将使用next-intl在 React Server 组件中来实现所有国际化需求，并且我们将研究一种通过简约的客户端足迹引入交互性的技术。从 Unsplash 获取照片 服务器组件的一个主要优点是能够通过async/await直接从内部组件获取数据。我们可以使用它从...
dtc(serialized: string, t: NextIntlTranslationFunction): string Deserializes a string back to a translation call and executes it. isSerializedTranslationCall(str: string): boolean Checks if a string is a valid serialized translation call.
Error: Usage of next-intl APIs in Server Components currently opts into dynamic rendering. This limitation will eventually be lifted, but as a stopgap solution, you can use the `setRequestLocale` API to enable static rendering, see https://next-intl-docs.vercel.app/docs/getting-started/app-r...
在Next.js项目中,使用next-intl库获取当前语言设置可以通过以下步骤实现: 导入next-intl库: 首先,确保你已经安装了next-intl库,并且在你的项目中导入了必要的模块。 调用next-intl的API获取当前语言设置: next-intl提供了getLocale方法,可以在服务器端和客户端使用,以获取当前的语言设置。 输出或返回获取到的当前语...
1. 首先我们先安装next-intl: pnpm add next-intl 2. 在Nextjs项目根目录中创建message目录, 然后新建语言包文件: # messages - zh.json - en.json 当然如果有其它语言翻译需求, 也可以添加对应的语言文件,这里给大家推荐一个语言名称映射表: 3. 在src下新建i18n.ts文件,来配置我们的国际化逻辑。
使用next-intl 添加国际化 除了英语之外,我们还希望我们的应用程序能够提供西班牙语版本。对next-intl服务器组件的支持目前处于测试阶段,因此我们可以使用最新测试版的安装说明来设置我们的应用程序以实现国际化。 格式化日期 除了添加第二语言之外,我们已经发现该应用程序不太适合英语用户,因为日期应该被格式化。为了获得良...
Install npm i next-intl-app Repository github.com/amannn/next-intl Homepage next-intl-docs.vercel.app Weekly Downloads 3 Version 1.1.0 License MIT Unpacked Size 204 kB Total Files 297 Issues 37 Pull Requests 7 Last publish 2 years ago Collaborators Try on RunKit Report malware ...
1. 首先我们先安装 next-intl : 复制 pnpmaddnext-intl 1. 2. 在 Nextjs 项目根目录中创建 message 目录, 然后新建语言包文件: 复制 # messages-zh.json-en.json 1. 2. 3. 当然如果有其它语言翻译需求, 也可以添加对应的语言文件,这里给大家推荐一个语言名称映射表: ...
1 + import createNextIntlPlugin from 'next-intl/plugin'; 2 + 3 + const withNextIntl = createNextIntlPlugin(); 4 + 1 5 /** @type {import('next').NextConfig} */ 2 6 const nextConfig = {}; 3 7 4 - export default nextConfig; 8 + export default withNextIntl(nextCo...
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 useEffect(() => { form.clearErrors() if(state && state.data) { router.push('/') } // 后台错误 if(state && state.errorMessage) { // showErrorToast(t(state.errorMessage)) ...