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]()

3. 在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目录下面写，不是项目根目录