当前位置: 首页 > ds >正文

nextjs国际化

引用:https://blog.csdn.net/qq_41180335/article/details/138034870

官方教程:https://nextjs.org/docs/app/building-your-application/routing/internationalization

创建一个动态路由的目录,,

next.js 13+ 获取路由参数,,可以通过props传递params

在这里插入图片描述
这个params中的 lang属性就是动态设置的路由值

  1. 创建dictionaries文件夹,里面放国际化的json

  2. 创建一个dictionaries.ts工具类,,根据传入的lang语言,返回对应的json:

import 'server-only'const dictionaries = {en: () => import('./dictionaries/en.json').then((module) => module.default),zh: () => import('./dictionaries/zh.json').then((module) => module.default),
}export const getDictionary = async (locale: 'en' | 'zh') =>dictionaries[locale]()
  1. 在page页面通过 params 获取到lang,,然后在根据lang加载json渲染页面

import { getDictionary } from './dictionaries.ts'export default async  function DemoPage({params}:{params:{lang:"en"|"zh"}}) {// var params = useParams();// const {lang} = paramslet dict = await getDictionary(params.lang)console.log(dict,"dict")return (<main className="flex min-h-screen flex-col items-center justify-between p-24">111---{"en"}<div>{dict.products.cart}</div></main>);
}

next的middleware.ts ,可以作为中间件,拦截路由,,在src目录下面写,不是项目根目录

http://www.xdnf.cn/news/1726.html

相关文章:

  • 【Rust结构体】Rust结构体详解:从基础到高级应用
  • Linux环境下安装PostgreSQL详细步骤
  • Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
  • LLM学习笔记4——本地部署Docker、vLLM和Qwen2.5-32B-Instruct实现OpenManus的使用
  • JDK(java)安装及配置 --- app笔记
  • Matlab 基于共面螺旋管或共面亥姆霍兹谐振器的超薄低频吸声板
  • Sharding-JDBC 系列专题 - 第九篇:高可用性与集群管理
  • 【JavaScript】`Object` 对象静态方法详解
  • 怎样记忆Precision、Recall?
  • [特殊字符][特殊字符] HarmonyOS相关实现原理聊聊![特殊字符][特殊字符]
  • 【玩转全栈】—— 无敌前端究极动态组件库--Inspira UI
  • 乡村治理数字化平台:信息技术赋能乡村振兴的深度探索
  • 数据结构-选择排序(Python)
  • QT创建软件登录界面(14)
  • JavaScript 的“世界模型”:深入理解对象 (Objects)
  • 理解欧拉公式
  • 弄清C语言中的链表
  • 济南国网数字化培训班学习笔记-第二组-1节-输电线路工程
  • DRF凭什么更高效?Django原生API与DRF框架开发对比解析
  • 如何创建和使用 Hive 视图
  • 【低配置电脑预训练minimind的实践】
  • 【网络安全】社会工程学策略
  • H3C Magic路由器安全警报来啦![特殊字符][特殊字符]
  • Spark-Streaming核心编程(2)
  • 三国杀专业分析面板,立志成为桌游界的stockfish
  • AI与智能能源管理:如何通过AI优化能源分配和消耗?
  • 矩阵运营的限流问题本质上是平台与创作者之间的流量博弈
  • 【25软考网工】第三章(3)虚拟局域网VLAN
  • Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
  • Qt5.15.2+OpenCV4.9.0开发环境搭建详细图文教程(OpenCV使用Qt自带MinGW编译的全过程,包教包会)