如何在react中添加阿拉伯语和法语作为附加语言?

Question

import Image from 'next/image'
import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
function Language() {
const { pathname, locale, push, asPath } = useRouter();
const lng = locale == "en" ? "ar" : "en";
const dir = locale === "en" ? "ltr" : "rtl";
useEffect(() => {
document.dir = dir;
if (dir === "ltr") {
document.body.classList.add("ltr");
document.body.classList.remove("rtl");
} else {
document.body.classList.add("rtl");
document.body.classList.remove("ltr");
}
}, [dir]);
const toggleLanguage = () => {
document.dir = dir;
if (lng === "en") {
document.body.classList.add("ltr");
document.body.classList.remove("rtl");
} else {
document.body.classList.add("rtl");
document.body.classList.remove("ltr");
}
push(pathname, asPath, { locale: lng });
};
return (
<div className="language">
<div className="lan__country active us flex items-center cursor-pointer" onClick={toggleLanguage} >
<div className="flag flag1">
<div className="dark-none">
<Image src="/en.svg" width="20" height="20"alt="us flag" className='dark-none' />
</div>
<div className="d-none dark-show">
<Image src="/lang_white.svg" width="20" height="20"alt="us flag" className='d-none dark-show' />
</div>
</div>
<div className="flag flag2">
<div className="dark-none">
<Image src="/en.svg" width="20" height="20"alt="us flag" className='dark-none' />
</div>
<div className="d-none dark-show">
<Image src="/lang_white.svg" width="20" height="20"alt="us flag" className='d-none dark-show' />
</div>
</div>
</div>
</div>
)
}
export default Language

如何使用next.js库将阿拉伯语文本翻译成英语?我可以通过点击按钮来改变方向，但我也想改变措辞。我只负责前端。这个问题已经完成了，但是你也可以发布你的答案。

Answer 1

有多种方法可以做到这一点。如果您有来自数据库的动态文本，您可以使用i18 (https://www.i18next.com/)进行翻译。

如果你只是想改变你的硬代码数据到另一种语言，你应该把你所有的静态数据写在json文件中的对象，并通过键(en:…， ar:…)

的例子:

→data.json

{
en:{
"title":"This is En Language",
"name":"My Name Is F"
},
ar:{
"title":"سلام علیکم",
"name":"تعلم"
}
}

→index.js

import {data} from "./folder/data.json;
import { useRouter } from "next/router";
const Home=()=>{
const {locale}=useRouter()
const myData=data[locale]
return (
<div>
<h1>title = {myData.title}</h1> 
<p>Name = {myData.name} </p>
</div>)
}

Answer 2

从这个官方示例中获得帮助https://github.com/vercel/next.js/tree/canary/examples/with-i18n-next-intl