Để tích hợp đa ngôn ngữ trong ứng dụng Single Page App(SPA) ta thường dùng package i18next, khi đó với mỗi text trên page phải xử lý translate thủ công, điều này rất tốn thời gian. Thay vì đó chúng ta sẽ sử dụng google api để dịch text 1 cách nhanh chóng, lúc này chỉ cần chọn ngôn ngữ thì toàn bộ text trên page sẽ tự động translate.
Đầu tiên, cài đặt cookies-next để get cookie ở client
npm i cookies-next
//File index.js
"use client"
import "./styles.scss";
import _ from "lodash";
import Script from "next/script";
import { getCookie } from 'cookies-next';
import { useEffect, useState } from "react";
import Image from "next/image";
const languages = [
{ label: "Việt", value: "vi", src: "/images/lang-vi.png" },
{ label: "Anh", value: "en", src: "/images/lang-en.png" },
// thêm ngôn ngữ khác
];
Trong đó: languages là danh sách ngôn ngữ cho người dùng chọn
// File index.js
const includedLanguages = languages.map(lang => lang.value).join(",");
const googleTranslateElementInit = () => {
new window.google.translate.TranslateElement({
pageLanguage: "auto", includedLanguages
}, "google_translate_element");
}
//File index.js
export const getPrefLangCookie = async () => {
if (typeof window == 'undefined') {
// Read a cookie server-side
return require('next/headers').cookies().get('googtrans')?.value ?? "vi";
}
return getCookie("googtrans") ?? "vi";
};
// File index.js
const LanguageSelector = ({ onChange, value }) => {
const langCookie = value.split("/")[2];
return (
<ul className="d-flex text-right sm-text-center gap-1">
{languages.map((it) => {
return (
<li className={`px-1 ${langCookie === it.value ? "border" : ""}`} onClick={() => onChange(it.value)} key={it.value} >
<div className="d-flex align-items-center gap-1">
<Image className='mr-2' width={25} height={20} src={it.src} />
</div>
</li>
)
})}
</ul>
);
}
export function GoogleTranslate({ prefLangCookie }) {
const [langCookie, setLangCookie] = useState(decodeURIComponent(prefLangCookie));
useEffect(() => {
prefLangCookie.then(res => {
setLangCookie(res);
})
window.googleTranslateElementInit = googleTranslateElementInit;
}, []);
const onChange = (value) => {
const lang = "/en/" + value;
setLangCookie(lang);
const element = document.querySelector(".goog-te-combo");
element.value = value;
element.dispatchEvent(new Event("change"));
};
return (
<div>
<div id="google_translate_element" style={{ visibility: "hidden", width: "1px", height: "1px" }}></div>
<LanguageSelector onChange={onChange} value={langCookie} />
<Script
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
strategy="afterInteractive"
/>
</div>
);
};
import { GoogleTranslate, getPrefLangCookie } from "/multi-language/index.js";
export const Header = () => {
return(
<GoogleTranslate prefLangCookie={getPrefLangCookie()}/>
)
}
File /multi-language/styles.scss
// File styles.scss
body {
position: static;
top: 0 !important;
}
.skiptranslate iframe {
display: none !important;
}
Như vậy là chúng ta đã hoàn thành việc nhúng translate google api vào ứng dụng Nextjs, giúp cho người dùng có thể xem trang của chúng ta theo nhiều ngôn ngữ khác nhau một cách tiện lợi nhất
Lưu ý: Hướng dẫn này là dùng cho dự án Nextjs