跳转到内容
主菜单
主菜单
移至侧栏
隐藏
导航
首页
最近更改
随机页面
MediaWiki帮助
代码酷
搜索
搜索
中文(中国大陆)
外观
创建账号
登录
个人工具
创建账号
登录
未登录编辑者的页面
了解详情
贡献
讨论
编辑“︁
Next.js国际化概述
”︁(章节)
页面
讨论
大陆简体
阅读
编辑
编辑源代码
查看历史
工具
工具
移至侧栏
隐藏
操作
阅读
编辑
编辑源代码
查看历史
常规
链入页面
相关更改
特殊页面
页面信息
外观
移至侧栏
隐藏
您的更改会在有权核准的用户核准后向读者展示。
警告:
您没有登录。如果您进行任何编辑,您的IP地址会公开展示。如果您
登录
或
创建账号
,您的编辑会以您的用户名署名,此外还有其他益处。
反垃圾检查。
不要
加入这个!
= Next.js国际化概述 = '''Next.js国际化(i18n)与本地化(l10n)'''是构建多语言网站的核心功能,允许开发者根据用户的语言或地区动态调整内容。Next.js通过内置的路由系统、内容协商和组件级渲染支持,简化了这一流程。 == 核心概念 == === 国际化(i18n) === 国际化是设计应用程序以支持多语言和区域格式的过程。Next.js通过以下方式实现: * '''路由本地化''':URL路径包含语言标识(如<code>/en/about</code>或<code>/es/about</code>)。 * '''内容协商''':根据用户浏览器设置自动重定向到首选语言。 === 本地化(l10n) === 本地化是将国际化内容适配到特定区域的过程,包括: * 翻译文本 * 日期、货币、数字的格式化 * 方向性(如RTL语言支持) == 配置基础 == 在<code>next.config.js</code>中启用i18n: <syntaxhighlight lang="javascript"> // next.config.js module.exports = { i18n: { locales: ['en', 'fr', 'de'], // 支持的语言列表 defaultLocale: 'en', // 默认语言 }, } </syntaxhighlight> == 路由处理 == Next.js自动处理路由本地化: {| class="wikitable" |+ 路由示例 ! 用户访问路径 !! 实际渲染路径 !! 说明 |- | <code>/about</code> || <code>/en/about</code> | 默认语言重定向 |- | <code>/fr/about</code> || <code>/fr/about</code> | 显式法语路径 |} == 内容翻译 == 使用<code>next-translate</code>或<code>next-intl</code>等库管理翻译: <syntaxhighlight lang="javascript"> // pages/[locale]/about.js import useTranslation from 'next-translate/useTranslation' export default function About() { const { t } = useTranslation() return <h1>{t('about:title')}</h1> // 根据locale加载对应翻译 } </syntaxhighlight> 翻译文件结构示例: <pre> locales/ en/ about.json fr/ about.json </pre> == 区域感知格式化 == 使用JavaScript的<code>Intl</code> API处理区域差异: <syntaxhighlight lang="javascript"> new Intl.DateTimeFormat(locale).format(date) // 本地化日期 new Intl.NumberFormat(locale).format(number) // 本地化数字 </syntaxhighlight> == 实际案例 == '''案例:电商网站多语言切换''' 1. 用户从法国访问 → 自动重定向到<code>/fr</code> 2. 价格显示为欧元格式(1.234,56 €) 3. 日期显示为法式格式(31/12/2023) <mermaid> graph TD A[用户访问 /products] --> B{检测accept-language头部} B -->|fr-FR| C[/fr/products] B -->|en-US| D[/en/products] C --> E[加载法语翻译] D --> F[加载英语翻译] </mermaid> == 高级特性 == === 动态导入翻译 === 按需加载翻译文件减少初始负载: <syntaxhighlight lang="javascript"> const translations = await import(`../locales/${locale}.json`) </syntaxhighlight> === 混合模式 === 支持子路径(<code>/fr</code>)和域名(<code>fr.example.com</code>)混合路由: <syntaxhighlight lang="javascript"> // next.config.js i18n: { domains: [ { domain: 'example.com', defaultLocale: 'en' }, { domain: 'example.fr', defaultLocale: 'fr' }, ] } </syntaxhighlight> == 数学公式支持 == 当需要处理复数形式时,可使用语言特定的复数规则: <math> n \in \{0,1,2,...\} \Rightarrow \text{pluralForm} = \begin{cases} 0 & \text{法语特殊形式} \\ 1 & \text{单数形式} \\ n \geq 2 & \text{复数形式} \end{cases} </math> == 最佳实践 == 1. 始终提供回退语言(默认语言) 2. 使用标准语言代码(如<code>zh-CN</code>而非<code>cn</code>) 3. 分离可翻译文本与代码逻辑 4. 测试RTL语言布局 == 常见问题 == '''Q: 如何强制切换语言?''' A: 使用<code>next/router</code>: <syntaxhighlight lang="javascript"> import { useRouter } from 'next/router' const router = useRouter() router.push('/about', '/about', { locale: 'fr' }) </syntaxhighlight> '''Q: 静态生成如何处理多语言?''' A: 在<code>getStaticPaths</code>中返回所有语言路径: <syntaxhighlight lang="javascript"> export async function getStaticPaths() { return { paths: ['en', 'fr'].map(locale => ({ params: { locale } })), fallback: false } } </syntaxhighlight> 通过以上实现,Next.js开发者可以构建真正全球化的应用程序,同时保持开发体验的一致性和高效性。 [[Category:后端框架]] [[Category:Next.js]] [[Category:Next.js国际化与本地化]]
摘要:
请注意,所有对代码酷的贡献均被视为依照知识共享署名-非商业性使用-相同方式共享发表(详情请见
代码酷:著作权
)。如果您不希望您的文字作品被随意编辑和分发传播,请不要在此提交。
您同时也向我们承诺,您提交的内容为您自己所创作,或是复制自公共领域或类似自由来源。
未经许可,请勿提交受著作权保护的作品!
取消
编辑帮助
(在新窗口中打开)