M

MLOG

Tiếng Việt

Tìm hiểu cách triển khai quốc tế hóa (i18n) liền mạch trong các ứng dụng Next.js của bạn để tiếp cận khán giả toàn cầu. Bao gồm định tuyến, dịch nội dung và các phương pháp hay nhất.

Quốc tế hóa Next.js: Xây dựng ứng dụng đa ngôn ngữ cho khán giả toàn cầu

Trong thế giới kết nối ngày nay, việc xây dựng các ứng dụng phục vụ cho khán giả toàn cầu không còn là một điều xa xỉ – đó là một sự cần thiết. Next.js, một framework React mạnh mẽ, cung cấp các tính năng mạnh mẽ để triển khai quốc tế hóa (i18n), cho phép bạn tạo ra các ứng dụng đa ngôn ngữ mang lại trải nghiệm được địa phương hóa cho người dùng trên toàn thế giới. Hướng dẫn toàn diện này sẽ dẫn dắt bạn qua các khái niệm, kỹ thuật và các phương pháp hay nhất để xây dựng các ứng dụng Next.js được quốc tế hóa.

Hiểu về Quốc tế hóa và Địa phương hóa

Trước khi đi sâu vào các chi tiết cụ thể của i18n trong Next.js, hãy làm rõ các thuật ngữ chính:

Về cơ bản, i18n chuẩn bị ứng dụng của bạn cho việc địa phương hóa. Bằng cách tách các yếu tố phụ thuộc vào ngôn ngữ ra khỏi mã nguồn lõi, bạn làm cho việc địa phương hóa ứng dụng cho các thị trường khác nhau trở nên dễ dàng hơn.

Tại sao nên triển khai Quốc tế hóa trong Next.js?

Việc triển khai i18n trong ứng dụng Next.js của bạn mang lại nhiều lợi ích:

Các tính năng và cấu hình i18n của Next.js

Next.js cung cấp hỗ trợ tích hợp cho i18n thông qua các tính năng định tuyến và quản lý nội dung của nó. Dưới đây là phân tích các tính năng quan trọng:

1. Cấu hình i18n trong next.config.js

Cấu hình cốt lõi cho i18n nằm trong tệp next.config.js. Đây là một ví dụ:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Một mảng các miền địa phương được hỗ trợ (mã ngôn ngữ)
    defaultLocale: 'en', // Miền địa phương mặc định để sử dụng
    localeDetection: true, // Bật/tắt tự động phát hiện miền địa phương dựa trên cài đặt trình duyệt (tùy chọn)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Giải thích:

2. Định tuyến với tiền tố Locale

Next.js tự động thêm tiền tố vào các tuyến đường bằng miền địa phương. Ví dụ, nếu bạn có một trang tại /about và miền địa phương là 'es' (tiếng Tây Ban Nha), URL sẽ trở thành /es/about. Điều này cho phép có các phiên bản ngôn ngữ khác nhau của các trang và cho phép các công cụ tìm kiếm lập chỉ mục nội dung cho mỗi miền địa phương. Framework sẽ tự xử lý việc chuyển hướng và định tuyến cho bạn.

3. Sử dụng Hook useRouter

Hook useRouter từ next/router cung cấp quyền truy cập vào miền địa phương hiện tại và các thông tin định tuyến khác.


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
Miền địa phương hiện tại: {locale}

      
Các miền địa phương có sẵn: {locales.join(', ')}

      
Miền địa phương mặc định: {defaultLocale}

    

  );
}

export default MyComponent;

Đối tượng router cung cấp các thuộc tính chính sau:

Chiến lược dịch nội dung

Sau khi bạn đã cấu hình ứng dụng Next.js của mình cho i18n, bạn sẽ cần triển khai các chiến lược để dịch nội dung của mình. Dưới đây là một số cách tiếp cận phổ biến:

1. Sử dụng một Hệ thống quản lý dịch thuật chuyên dụng (TMS)

Đối với các dự án quy mô lớn với nhiều ngôn ngữ, một TMS rất được khuyến khích. Các tùy chọn phổ biến bao gồm:

Lợi ích:

2. Tạo các tệp dịch JSON

Đối với các dự án nhỏ hơn, việc sử dụng các tệp JSON để lưu trữ các bản dịch là một phương pháp đơn giản và hiệu quả.

Ví dụ về cấu trúc thư mục:


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

Ví dụ en.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Ví dụ es.json:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

Ví dụ MyComponent.js:


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

Cách tiếp cận này cung cấp sự linh hoạt và đơn giản cho các dự án nhỏ hơn. Nó thường dễ dàng cập nhật và bảo trì.

3. Sử dụng thư viện dịch thuật

Một số thư viện JavaScript giúp đơn giản hóa việc dịch nội dung trong các thành phần React của bạn.

Ví dụ với next-i18next (Cài đặt: npm install next-i18next i18next react-i18next):

Tạo một tệp cấu hình i18n (ví dụ: i18n.js trong thư mục gốc của bạn):


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

Tạo cấu hình Next.js của bạn cho next-i18next.


// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // cấu hình khác
}

module.exports = nextConfig

Thêm cấu hình và import bản dịch vào tệp _app.js của bạn:


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

Tạo một thư mục và điền vào đó các miền địa phương cho các bản dịch của bạn.


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

Ví dụ en/common.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Sử dụng bản dịch trong một thành phần:


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Ví dụ này sử dụng hook useTranslation để lấy các bản dịch dựa trên miền địa phương hiện tại.

Xử lý các tuyến đường động và Tạo trang web tĩnh (SSG)

Quốc tế hóa trở nên phức tạp hơn khi xử lý các tuyến đường động (ví dụ: các bài đăng blog, trang sản phẩm) và tạo trang web tĩnh (SSG).

1. Tuyến đường động (ví dụ: /blog/[slug])

Đối với các tuyến đường động, bạn sẽ cần tạo các đường dẫn chính xác cho mỗi miền địa phương vào thời điểm xây dựng bằng cách sử dụng getStaticPaths. Hàm này trả về một mảng các đường dẫn mà Next.js nên kết xuất trước.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Lấy dữ liệu bài đăng blog

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // hoặc 'blocking' nếu bạn muốn hiển thị trạng thái tải
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Giải thích:

2. Tạo trang web tĩnh (SSG) với getStaticProps

Trong getStaticProps, bạn có thể lấy nội dung đã dịch dựa trên tham số locale.


export async function getStaticProps({ params, locale }) {
  // Lấy nội dung dựa trên miền địa phương và tham số
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Hàm getPostBySlug nên lấy nội dung đã dịch cho slug và miền địa phương đã cho, có thể được lấy từ các tệp dịch, cơ sở dữ liệu hoặc một CMS của bạn.

3. Kết xuất phía máy chủ (SSR) với getServerSideProps

Đối với nội dung cần được lấy vào thời điểm yêu cầu, hãy sử dụng getServerSideProps. Điều này hữu ích nếu nội dung thay đổi thường xuyên hoặc được cá nhân hóa cho mỗi người dùng.


export async function getServerSideProps({ params, locale, req, res }) {
  // Lấy dữ liệu dựa trên miền địa phương và tham số (ví dụ: từ cơ sở dữ liệu)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

Các phương pháp hay nhất cho Quốc tế hóa Next.js

Việc tuân theo các phương pháp hay nhất này sẽ giúp bạn xây dựng các ứng dụng đa ngôn ngữ mạnh mẽ, dễ bảo trì và thân thiện với người dùng:

Những lưu ý về SEO cho các trang web được quốc tế hóa

Việc tối ưu hóa trang web được quốc tế hóa của bạn cho các công cụ tìm kiếm là điều cần thiết để thúc đẩy lưu lượng truy cập tự nhiên từ khắp nơi trên thế giới. Dưới đây là một số phương pháp SEO tốt nhất:

Ví dụ: Xây dựng một Blog đa ngôn ngữ đơn giản

Hãy tạo một ví dụ đơn giản về một blog đa ngôn ngữ sử dụng Next.js. Điều này sẽ cung cấp một minh họa cụ thể hơn về cách áp dụng các khái niệm đã thảo luận ở trên.

1. Thiết lập dự án

Tạo một dự án Next.js mới:


npx create-next-app my-multi-lang-blog
cd my-multi-lang-blog

2. Cấu hình i18n (next.config.js)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

3. Tạo các tệp dịch

Tạo một thư mục locales trong thư mục gốc và thêm các tệp JSON sau:

locales/en.json:


{
  "title": "Welcome to My Blog",
  "postTitle": "My First Post",
  "postContent": "This is the content of my first blog post."
}

locales/es.json:


{
  "title": "Bienvenido a mi Blog",
  "postTitle": "Mi Primer Post",
  "postContent": "Este es el contenido de mi primer publicación de blog."
}

locales/fr.json:


{
  "title": "Bienvenue sur Mon Blog",
  "postTitle": "Mon Premier Article",
  "postContent": "Ceci est le contenu de mon premier article de blog."
}

4. Tạo thành phần bài đăng Blog (ví dụ: components/BlogPost.js)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. Tạo trang Index (pages/index.js)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

Ví dụ đơn giản này giới thiệu các nguyên tắc cơ bản của việc quốc tế hóa Next.js. Bạn có thể mở rộng trên khuôn khổ cơ bản này để bao gồm các tính năng phức tạp hơn, chẳng hạn như các tuyến đường động và tích hợp với các hệ thống quản lý dịch thuật. Cân nhắc cải thiện các liên kết ở trên bằng thành phần Link và thêm thuộc tính locale phù hợp.

6. Chạy ứng dụng

Chạy ứng dụng với:


npm run dev

Bây giờ bạn có thể truy cập blog của mình tại http://localhost:3000 (tiếng Anh), http://localhost:3000/es (tiếng Tây Ban Nha), và http://localhost:3000/fr (tiếng Pháp). Bạn sẽ thấy tiêu đề và nội dung bài đăng blog được dịch dựa trên miền địa phương đã chọn.

Kết luận

Next.js cung cấp một bộ tính năng toàn diện để triển khai quốc tế hóa trong các ứng dụng web của bạn. Bằng cách tuân theo các nguyên tắc và kỹ thuật được nêu trong hướng dẫn này, bạn có thể tạo ra các ứng dụng đa ngôn ngữ mang lại trải nghiệm được địa phương hóa cho người dùng trên toàn cầu. Hãy nhớ lập kế hoạch chiến lược i18n của bạn sớm, chọn phương pháp dịch phù hợp với nhu cầu của bạn và ưu tiên trải nghiệm người dùng. Với việc lập kế hoạch và thực hiện cẩn thận, bạn có thể xây dựng các ứng dụng gây được tiếng vang với khán giả toàn cầu và mở ra những cơ hội tăng trưởng mới. Việc học hỏi liên tục, cập nhật các bản phát hành mới nhất và các phương pháp hay nhất sẽ đảm bảo rằng bạn đang sử dụng các công cụ và công nghệ của mình một cách hiệu quả.

Khi công nghệ tiến bộ, hãy mong đợi sẽ thấy nhiều tính năng i18n tiên tiến hơn xuất hiện. Khả năng tiếp cận người dùng qua các nền văn hóa và nhóm ngôn ngữ khác nhau sẽ vẫn là ưu tiên hàng đầu của các nhà phát triển ứng dụng trên toàn thế giới. Do đó, việc nắm vững các nguyên tắc cơ bản của i18n là một kỹ năng quý giá sẽ nâng cao giá trị của bạn trong bối cảnh phát triển toàn cầu ngày nay.