Other Languages

Bản địa hóa Next JS: Cách tạo Website đa ngôn ngữ

Table of Contents

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.

Bản địa hóa Next JS là gì? 

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ý nhanhgiao 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. 

Công việc này đòi hỏi sự kết hợp giữa Developer và Localization Specialist. Hai đội ngũ này cần đảm bảo bản dịch tương thích với hệ thống và giao diện hiển thị.

Bản địa hóa L10n và Quốc tế hóa i18n cho Next JS 

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. 

NEXT JS Localization Service - Thao & Co.

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ế.

Hướng dẫn thiết lập đa ngôn ngữ trên NextJS 

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:

  1. Sub-path 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

  1. Domain Routing

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).

NEXT JS Localization - Thao & Co.

 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.

Kinh nghiệm bản địa hóa NextJS cho Website 

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 ý.

  1. ● Next JS cho phép lưu trữ các ngôn ngữ đã được chọn trong cookie NEXT_LOCATE. Cookie đó sau này có thể dùng để ghi đề tiêu đề Accept-Language (phát hiện ngôn ngữ tự động). Ví dụ: Khi cookie NEXT_LOCATE=en được ghi nhận, người dùng sẽ được tự động chuyển đến trang tiếng Anh cho đến khi cookie bị xóa hoặc hết hạn.
  2. ● Vì Next.js biết người dùng đang truy cập ngôn ngữ nào nên sẽ tự động thêm thuộc tính lang vào thẻ <html>. Next.js không biết về các biến thể của một trang nên quý vị có thể thêm thẻ meta hreflang bằng cách sử dụng next/head để nói với các công cụ tìm kiếm về ngôn ngữ được dùng trên trang. Thông tin chi tiết về thẻ hreflang có trong tài liệu Google Webmasters.
  3. ● Quý vị nên ưu tiên phương pháp sub-path routing thay vì domain routing. Nguyên nhân là vì nó ít phức tạp khi triển khai và phù hợp với các website quy mô nhỏ và trung bình.

Đưa Website vươn ra quốc tế dễ dàng với Thao & Co.

Translation Services - Thao & Co.

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 websitetí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.

Nguồn: Thao & Company
Dịch vụ Dịch thuật và Bản địa hóa Chuyên nghiệp tại Việt Nam
Giải pháp Ngôn ngữ Chất lượng Đáp ứng Mọi Tiêu chuẩn
Liên hệ
Chúng tôi sẵn lòng hỗ trợ quý vị!
Chuyên ngành
Healthcare
Chúng tôi cung cấp bản dịch chính xác các loại tài liệu như hướng dẫn lâm sàng, bệnh án, bài báo nghiên cứu, nhãn sản phẩm, và phiếu khảo sát.
Advertising + Marketing
Mang thông điệp ra thế giới vượt mọi rào cản ngôn ngữ với dịch vụ dịch thuật tài liệu truyền tải thông tin, hướng dẫn và nội dung quảng cáo đơn giản.
Banking + Finance
Khi khách hàng tiếp cận thị trường mới, chúng tôi chuyên hỗ trợ dịch tài liệu kinh doanh, email, đơn xin việc, CV, tài liệu pháp lý và toàn bộ nền tảng ngân hàng/giao dịch và app.
Legal
Sở hữu bản dịch nhanh chóng, chính xác cho tài liệu pháp lý, hợp đồng, ghi chú, email và các loại văn kiện khác.
Real Estate + Construction
Chúng tôi có đội ngũ biên dịch chuyên về kiến trúc, xây dựng, bất động sản và kỹ thuật xây dựng dân dụng luôn sẵn sàng dịch thuật tài liệu chuyên ngành liên quan.
Retail + E-commerce
Nếu quý vị dự định tiếp cận thị trường quốc tế, đến với Thao & Co. để có ngay bản dịch tài liệu kinh doanh, thông báo công ty và biên bản cuộc họp, sẵn sàng hợp tác quốc tế.
Travel + Tourism
Chúng tôi mang đến bản dịch tổng hợp nội dung truyền thông nội bộ hoặc tài liệu hướng tới khách hàng, phục vụ các khách sạn, nhà hàng, hướng dẫn du lịch và hơn thế nữa.
Entertainment
Với nhiều năm kinh nghiệm dịch phim, kịch và quảng cáo, chúng tôi luôn cân nhắc kỹ khi lựa chọn từ ngữ và ý nghĩa phù hợp nhất với mỗi dự án.
Automotive + Aerospace
Tìm đến chuyên gia ngôn ngữ vững chuyên môn để dịch thuật và Việt hóa hướng dẫn sử dụng, bản vẽ CAD, cẩm nang sửa chữa và hợp đồng kinh doanh.
Manufacturing
Sở hữu bản dịch thuật ngữ chuyên ngành cho tài liệu hướng dẫn, an toàn lao động, quản lý chất lượng và tuân thủ quy định.
Game
Chúng tôi dịch và Việt hoá luật chơi, hướng dẫn, cốt truyện, hội thoại và các chi tiết về đồ hoạ và kỹ thuật, chắp cánh đưa game sang thị trường mới.
Education
Dịch vụ dịch thuật và bản địa hóa chuyên nghiệp nội dung ngành giáo dục dành cho bảng điểm, bằng cấp, chứng chỉ, website, app và các loại tài liệu khác.
Technology
Dịch vụ bản địa hóa chuyên nghiệp đưa tài liệu kỹ thuật, website, app, software và các sản phẩm kỹ thuật số vươn tầm quốc tế.
Quý vị đã sẵn sàng cho bước tiếp theo? Hãy cho chúng tôi biết về dự án của quý vị.

Nhận báo giá