Bản địa hóa Next JS là từ khóa được tìm kiếm rất phổ biến thời gian gần đây. Nhu cầu mở rộng thị trường và tiếp cận khách hàng mới thông qua website đa ngôn ngữ đang tăng cao. Bài viết này sẽ hướng dẫn quý vị cách tạo một website đa ngôn ngữ qua Next JS.
Trước khi bắt đầu đi vào hướng dẫn chi tiết, quý vị hãy dành ít phút để tìm hiểu về các khái niệm liên quan. Next.js hay Next JS là một framework mã nguồn mở, được tạo ra bởi công ty Vercel vào năm 2016. Next JS mang đến khả năng xây dựng những ứng dụng web React và website tĩnh với tốc độ xử lý nhanh và giao diện thân thiện người dùng.
Bản địa hóa là việc điều chỉnh các nội dung của sản phẩm, dịch vụ, ứng dụng hoặc tài liệu sao cho phù hợp với một thị trường mục tiêu. Chiến lược bản địa hóa nội dung không chỉ dừng lại ở mặt ngôn ngữ mà còn các yêu cầu về văn hóa, màu sắc, tôn giáo,….
Cụm từ “bản địa hóa Next JS” xuất hiện khi framework này hỗ trợ tích hợp đa ngôn ngữ. Giờ đây, quý vị có thể dễ dàng triển khai một dự án website đa ngôn ngữ. Các thao tác cài đặt không quá phức tạp, trải nghiệm nhanh chóng, giao diện thân thiện là những ưu điểm của phương pháp này.
Trong quá trình tìm kiếm dịch vụ dịch thuật, có nhiều thuật ngữ dễ gây khó hiểu và nhầm lẫn. Quý vị hẳn đã từng được nghe nói đến bản địa hóa (Localization – L10n) và quốc tế hóa (Internationalization – i18n). Trong đó, từ viết tắt này được hình thành bằng cách lấy hai ký tự đầu và cuối trong tiếng Anh, con số ở giữa là số ký tự còn lại sau khi bỏ hai ký tự đầu cuối.
Bản địa hóa là khái niệm đề cập đến việc điều chỉnh nội dung sản phẩm, ứng dụng hoặc tài liệu sao cho có thể đáp ứng tất cả những yêu cầu về mặt ngôn ngữ, văn hóa, tôn giáo và những tiêu chuẩn khác của một thị trường mục tiêu cụ thể. Next.js localization là thuật ngữ vô cùng phổ biến trong quy trình tạo website đa ngôn ngữ bằng Next JS.
Quốc tế hóa được định nghĩa là việc thiết kế và phát triển nội dung sản phẩm, ứng dụng hoặc tài liệu để giúp việc bản địa hóa dễ dàng hơn cho các đối tượng mục tiêu khác nhau về văn hóa, khu vực hay ngôn ngữ. Quốc tế hóa Next JS ra đời như một nhu cầu thiết yếu trong bối cảnh ngày càng nhiều các sản phẩm dịch vụ như trò chơi, ứng dụng hay website tham gia vào các thị trường quốc tế.
Thông báo từ Next JS cho biết kể từ phiên bản v10.0.0 Next.js sẽ hỗ trợ tích hợp định tuyến quốc tế hóa (i18n). Quý vị chỉ cần cung cấp thông tin ngôn ngữ muốn chuyển đổi, ngôn ngữ mặc định và các ngôn ngữ dành riêng cho tên miền, còn lại Next.js sẽ tự động xử lý việc định tuyến.
Để tiến hành bản địa hóa Next JS, bước đầu tiên, quý vị cần thêm cấu hình i18n vào tệp next.config.js.
module.exports = {
i18n: {
// These are all the locales you want to support in
// your application
locales: [‘en-US’, ‘fr’, ‘nl-NL’],
// This is the default locale you want to be used when visiting
// a non-locale prefixed path e.g. `/hello`
defaultLocale: ‘en-US’,
// This is a list of locale domains and the default locale they
// should handle (these are only required when setting up domain routing)
// Note: subdomains must be included in the domain value to be matched e.g. “fr.example.com”.
domains: [
{
domain: ‘example.com’,
defaultLocale: ‘en-US’,
},
{
domain: ‘example.nl’,
defaultLocale: ‘nl-NL’,
},
{
domain: ‘example.fr’,
defaultLocale: ‘fr’,
// an optional http field can also be used to test
// locale domains locally with http instead of https
http: true,
},
],
},
}
Tiếp theo, có hai cách để xử lý miền là Sub-path Routing and Domain Routing:
Sub-path Routing hay định tuyến đường dẫn phụ sẽ đặt ngôn ngữ vào đường dẫn url.
module.exports = {
i18n: {
locales: [‘en-US’, ‘fr’, ‘nl-NL’],
defaultLocale: ‘en-US’,
},
}
Trong cấu hình trên, tiếng Anh (en-US), tiếng Pháp (fr), và tiếng Hà Lan (nl-NL) sẽ được tự động chuyển đổi, tiếng Anh là ngôn ngữ mặc định. Nếu quý vị có đường dẫn pages/blog.js thì các url sau sẽ có sẵn:
/blog
/fr/blog
/nl-nl/blog
Domain Routing hay định tuyến tên miền cho phép quý vị định dạng cấu hình các ngôn ngữ được cung cấp từ các tên miền khác nhau.
module.exports = {
i18n: {
locales: [‘en-US’, ‘fr’, ‘nl-NL’, ‘nl-BE’],
defaultLocale: ‘en-US’,
domains: [
{
// Note: subdomains must be included in the domain value to be matched
// e.g. www.example.com should be used if that is the expected hostname
domain: ‘example.com’,
defaultLocale: ‘en-US’,
},
{
domain: ‘example.fr’,
defaultLocale: ‘fr’,
},
{
domain: ‘example.nl’,
defaultLocale: ‘nl-NL’,
// specify other locales that should be redirected
// to this domain
locales: [‘nl-BE’],
},
],
},
}
Ví dụ: nếu quý vị có đường dẫn pages/blog.js thì các url sau sẽ có sẵn:
example.com/blog
www.example.com/blog
example.fr/blog
example.nl/blog
example.nl/nl-BE/blog
Sau khi thêm một trong hai cấu hình trên, quý vị đã định tuyến quốc tế hóa thành công, bao gồm tính năng phát hiện ngôn ngữ tự động. Điều này có nghĩa là Next.js sẽ tự động phát hiện và điều hướng người dùng dựa trên ngôn ngữ được chấp nhận (Accept-Language).
Quý vị có thể chạy ứng dụng Next JS trên localhost bằng câu lệnh npm run dev để kiểm tra. Bây giờ, bất cứ khi nào cài đặt ngôn ngữ trên trình duyệt được thay đổi thì Next JS sẽ tự động cập nhật lại. Giả sử, ngôn ngữ được dùng là tiếng Pháp thì đường dẫn sẽ có dạng /fr/blog.
Trong trường hợp quý vị muốn tắt tính năng phát hiện ngôn ngữ tự động, chỉ cần đặt localeDetection trong tệp next.config.js thành false.
module.exports = {
i18n: {
localeDetection: false,
},
}
Bước cuối cùng là thêm nút chuyển đổi ngôn ngữ. Quý vị có thể sử dụng next/link hoặc next/router để thực hiện chuyển ngữ.
Đối với next/link, một locate có thể được cung cấp để chuyển sang một ngôn ngữ khác. Nếu không có ngôn ngữ nào được cung cấp thì ngôn ngữ hiện đang hoạt động sẽ được sử dụng trong quá trình chuyển đổi máy khách. Ví dụ:
import Link from ‘next/link’
export default function IndexPage(props) {
return (
<Link href=”/another” locale=”fr”>
To /fr/another
</Link>
)
}
Khi sử dụng trực tiếp các phương thức next/router, quý vị có thể chỉ định ngôn ngữ sẽ được sử dụng thông qua các tùy chọn chuyển tiếp. Ví dụ:
import { useRouter } from ‘next/router’
export default function IndexPage(props) {
const router = useRouter()
return (
<div
onClick={() => {
router.push(‘/another’, ‘/another’, { locale: ‘fr’ })
}}
>
to /fr/another
</div>
)
}
Lưu ý rằng nếu chỉ muốn thay đổi ngôn ngữ và giữ lại tất cả thông tin khác, quý vị có thể cung cấp tham số href làm đối tượng:
import { useRouter } from ‘next/router’
const router = useRouter()
const { pathname, asPath, query } = router
// change just the locale and maintain all other route information including href’s query
router.push({ pathname, query }, asPath, { locale: nextLocale })
Nếu quý vị có một href đã bao gồm ngôn ngữ, thì có thể chọn không tự động xử lý tiền tố ngôn ngữ:
import Link from ‘next/link’
export default function IndexPage(props) {
return (
<Link href=”/fr/another” locale={false}>
To /fr/another
</Link>
)
}
Như vậy, chỉ với vài bước cấu hình i18n Next JS đơn giản là quý vị đã tạo ra một website đa ngôn ngữ qua Next JS. Tuy nhiên, đây chỉ là những cài đặt cơ bản, quý vị có thể bổ sung thêm nhiều tùy biến bằng cách tham khảo các đoạn mã bản địa hóa Next JS Github để tạo ra phiên bản phù hợp.
Việc bản địa hóa Next JS cho website tuy khá đơn giản nhưng có một vài điểm quý vị cần lưu ý.
Quy trình để có được bản dịch chất lượng cần trải qua nhiều bước dịch thuật & hiệu đính, kiểm thử bản địa hóa,…. Ngoài ra, khi tiến hành dịch thuật website, cần phải đảm bảo các yếu tố về SEO, UI/UX,…. Khi đã có bản dịch hoàn chỉnh, quý vị cần tích hợp vào website, bước này sẽ yêu cầu kiến thức về lập trình.
Trước nhu cầu đưa các sản phẩm như ứng dụng, trò chơi và website ra quốc tế ngày càng tăng, Thao & Co. mang đến những giải pháp tối ưu cho cá nhân và doanh nghiệp. Với dịch vụ dịch thuật website và tích hợp tùy chỉnh chuyên nghiệp, quý vị sẽ có ngay bản dịch tiêu chuẩn được bản địa hóa bởi các chuyên gia bản xứ và hỗ trợ tích hợp vào hệ thống CMS của website.
Là đơn vị dịch thuật có nhiều năm kinh nghiệm hợp tác cùng những công ty lớn ở cả trong và ngoài nước, Thao & Co. thấu hiểu những khó khăn của đối tác. Công ty cung cấp quy trình làm việc rõ ràng, đội ngũ dịch giả bản địa, chuyên gia marketing, lập trình viên nhiều năm kinh nghiệm cùng với nền tảng độc quyền giúp quý vị dễ dàng giám sát, trao đổi và làm việc xuyên suốt dự án.
Bản địa hóa Next JS là một trong các phương pháp tạo website đa ngôn ngữ khá phổ biến. Tương tự như việc tạo JavaScript đa ngôn ngữ hoặc thiết lập đa ngôn ngữ cho WordPress, quá trình thực hiện vẫn còn tồn tại những khó khăn nhất định. Nếu quý vị cần được tư vấn về các dịch vụ dịch thuật phần mềm, ứng dụng, trò chơi hay website hãy liên hệ ngay cho Thao & Co. qua trang Nhận báo giá để được liên hệ tư vấn trong thời gian sớm nhất.
