Bài viết


Tích hợp google api để làm đa ngôn ngữ trong ứng dụng Nextjs

Ngày đăng: 14/07/2024

Để 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


1.Tạo file chứa toàn bộ code xử lý: File /multi-language/index.js


//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


2.Khởi tạo google translate


// 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";
};


4.Quản lý và hiển thị ngôn ngữ đã chọn


// 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>
);
};


5.Nhúng component GoogleTranslate vào page, thường là trên header.


import { GoogleTranslate, getPrefLangCookie } from "/multi-language/index.js";

export const Header = () => {
return(
<GoogleTranslate prefLangCookie={getPrefLangCookie()}/>
)
}


6.Thêm code sau để xoá những hiển thị mặc định của google api

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

Liên hệ ngay tại đây với chúng tôi để được tư vấn nhanh nhất hoặc liên hệ:

Hotline: 0705.550.553

Email: bqsoftvn@gmail.com

Fanpage: https://www.facebook.com/bqsoftvn


Hân hạnh được hợp tác!

icon zalo
icon-mess