K60至尊版剛預(yù)熱 一加Ace2 Pro正面硬剛
Redmi這邊剛?cè)缁鹑巛钡男麄髁薑60 Ultra的各種技術(shù)和硬件配置，作為競(jìng)品的一加也坐不住了。一加中國(guó)區(qū)總裁李杰發(fā)布了兩條微博，表示在自家的一加Ace2上早就已經(jīng)采用了和PixelWo
哈，大家好，我是徐小夕。
最近 Next-Admin 中后臺(tái)管理系統(tǒng)已經(jīng)支持國(guó)際化，接下來(lái)就和大家分享一下實(shí)現(xiàn)國(guó)際化的詳細(xì)方案，方便大家輕松應(yīng)用到自己的項(xiàng)目。
github地址：https://github.com/MrXujiang/next-admin
演示地址：http://next-admin.com
圖片
Next-Admin 是一款基于 nextjs最新版 + Antd5.0的開源中后臺(tái)（同構(gòu)）系統(tǒng)，我們使用它可以輕松實(shí)現(xiàn)前后端同構(gòu)項(xiàng)目，支持SSR和CSR， 具體特點(diǎn)如下：
圖片
Next.js 的國(guó)際化插件有很多，以下是其中一些常用的：
在親自體驗(yàn)了以上幾款插件之后，我選擇了 next-intl， 從擴(kuò)展和使用靈活性上都非常不錯(cuò)， 接下來(lái)就和大家分享一下如何使用 next-intl 來(lái)實(shí)現(xiàn) Next 項(xiàng)目國(guó)際化.
圖片
pnpm add next-intl# messages- zh.json- en.json當(dāng)然如果有其它語(yǔ)言翻譯需求， 也可以添加對(duì)應(yīng)的語(yǔ)言文件，這里給大家推薦一個(gè)語(yǔ)言名稱映射表：
圖片
// src/i18n.tsximport {headers} from 'next/headers';import {notFound} from 'next/navigation';import {getRequestConfig} from 'next-intl/server';import {locales} from './navigation';export default getRequestConfig(async ({locale}) => { // Validate that the incoming `locale` parameter is valid if (!locales.includes(locale as any)) notFound(); const now = headers().get('x-now'); const timeZone = headers().get('x-time-zone') ?? 'Europe/Vienna'; const messages = (await import(`../messages/${locale}.json`)).default; return { now: now ? new Date(now) : undefined, timeZone, messages, defaultTranslationValues: { globalString: 'Global string', highlight: (chunks) => <strong>{chunks}</strong> }, formats: { dateTime: { medium: { dateStyle: 'medium', timeStyle: 'short', hour12: false } } }, onError(error) { if ( error.message === (process.env.NODE_ENV === 'production' ? 'MISSING_MESSAGE' : 'MISSING_MESSAGE: Could not resolve `missing` in `Index`.') ) { // Do nothing, this error is triggered on purpose } else { console.error(JSON.stringify(error.message)); } }, getMessageFallback({key, namespace}) { return ( '`getMessageFallback` called for ' + [namespace, key].filter((part) => part != null).join('.') ); } };});這段邏輯全局配置了 國(guó)際化加載的路徑，格式化數(shù)據(jù)的方式，時(shí)間等參數(shù)，當(dāng)然還有更多的邏輯處理可以參考 next-intl 文檔。
需要補(bǔ)充一下 navigation.tsx 這個(gè)文件的內(nèi)容：
import { createLocalizedPathnamesNavigation, Pathnames } from 'next-intl/navigation'; export const defaultLocale = 'zh'; export const locales = ['en', 'zh'] as const; export const localePrefix = process.env.NEXT_PUBLIC_LOCALE_PREFIX === 'never' ? 'never' : 'as-needed'; export const pathnames = { '/': '/', '/user': '/user', '/dashboard': '/dashboard', // '/nested': { // en: '/next-home', // zh: '/next-zh-home' // }, } satisfies Pathnames<typeof locales>; export const {Link, redirect, usePathname, useRouter} = createLocalizedPathnamesNavigation({ locales, localePrefix, pathnames });上面代碼定義了國(guó)際化的：
這樣我們后面在封裝 國(guó)際化切換組件的收就會(huì)有很好的 ts提示。
我們?cè)?nbsp;src 目錄下新建 middleware.ts, 內(nèi)容如下：
import createMiddleware from 'next-intl/middleware';import {locales, pathnames, localePrefix, defaultLocale} from './navigation';export default createMiddleware({ defaultLocale, localePrefix, pathnames, locales,});export const config = { // Skip all paths that should not be internationalized matcher: ['/((?!_next|.*//..*).*)']};這樣國(guó)際化方案就初步完成了。接下來(lái)我們來(lái)具體看看如何在頁(yè)面中使用國(guó)際化來(lái)寫文案。
next-intl 的國(guó)際化定義支持命名空間，我們可以在messages 對(duì)應(yīng)的語(yǔ)言文件中通過(guò)嵌套結(jié)構(gòu)來(lái)設(shè)置命名空間，有序的管理不同頁(yè)面的國(guó)際化文本：
// zh.json{ "index": { "title": "Next-Admin", "desc": "一款基于NextJS 14.0+ 和 antd5.0 開發(fā)的全棧開箱即用的多頁(yè)面中后臺(tái)管理解決方案", "log": { "title": "Next-Admin 進(jìn)程規(guī)劃", "1": "Next + antd5基礎(chǔ)工程方案", "2": "國(guó)際化語(yǔ)言支持", "3": "登錄注冊(cè) / 數(shù)據(jù)大盤 / 業(yè)務(wù)列表頁(yè)面", "4": "圖標(biāo)管理 / 素材管理", "5": "思維導(dǎo)圖 / 流程圖 / 3D可視化頁(yè)面", "6": "頁(yè)面搭建引擎 / 表單引擎", "7": "萬(wàn)維表" }, "try": "立即體驗(yàn)" }, "global": { "technological exchanges": "技術(shù)交流", "dashboard": "數(shù)據(jù)大盤", "customChart": "'自定義報(bào)表", "monitor": "數(shù)據(jù)監(jiān)控", "userManage": "用戶管理", "formEngine": "表單引擎", "board": "辦公白板", "orderList": "訂單列表", "resource": "資產(chǎn)管理" }, // ...}這樣我們就可以這樣來(lái)使用：
'use client';import { useTranslations } from 'next-intl';export default Page(){ const t = useTranslations('global'); return <div> { t('technological exchanges') } </div>}同樣我們還可以給國(guó)際化文案中使用動(dòng)態(tài)變量：
// en.json{ "weclome": "Hello {name}!"}// page.tsxt('weclome', {name: 'Next-Admin'}); // "Hello Next-Admin!"官方文檔中還介紹了如何使用數(shù)學(xué)計(jì)算，時(shí)間日期格式化等功能， 整體來(lái)說(shuō)還是非常強(qiáng)大的。
由于 next 項(xiàng)目支持客戶端渲染和服務(wù)端渲染，所以使用 next-intl 的方式也是有區(qū)別的，如果我們?cè)陧?yè)面中出現(xiàn) next-intl 相關(guān)的服務(wù)端渲染報(bào)錯(cuò), 可以在頁(yè)面同級(jí)添加 layout.tsx, 然后做如下封裝：
import { NextIntlClientProvider, useMessages } from 'next-intl';type Props = { children: React.ReactNode; params: {locale: string};};export default function LocaleLayout({children, params: { locale }}: Props) { // Receive messages provided in `i18n.ts` const messages = useMessages(); return <NextIntlClientProvider locale={locale} messages={messages}> {children} </NextIntlClientProvider> }這樣就可以解決報(bào)錯(cuò)問(wèn)題了（本人親自實(shí)驗(yàn)好用）。
同時(shí)，這也是基于 nextjs 嵌套布局實(shí)現(xiàn)的方案， 為了使用 next-intl, 我們還需要在 next/src/app目錄做如下改造：
next-admin/src/app/[locale]也就是加一層[locale] 目錄。
好啦， 通過(guò)以上的配置我們就可以開心的使用國(guó)際化了，全部代碼我已經(jīng)同步到 Next-Admin 倉(cāng)庫(kù)了， 大家可以開箱即用。
github地址：https://github.com/MrXujiang/next-admin
演示地址：http://next-admin.com
本文鏈接：http://m.www897cc.com/showinfo-26-81240-0.htmlNext.js實(shí)現(xiàn)國(guó)際化方案完全指南
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 深入理解Java虛擬機(jī)：方法區(qū)詳解
下一篇： 第三方組件與依賴管理簡(jiǎn)介
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)