Hướng dẫn làm Website đa ngôn ngữ (i18n) với Next.js App Router chuẩn SEO Google

Làm thế nào để xây dựng một website đa ngôn ngữ (Ví dụ: Tiếng Việt /vi, Tiếng Anh /en) vừa cho tốc độ nạp trang siêu tốc vừa được Google index bài viết ở cả 2 thị trường? Thư viện next-intl kết hợp với Next.js App Router là bộ giải pháp chuẩn mực nhất hiện nay!

1. Cấu trúc thư mục i18n trong Next.js App Router

Sử dụng dynamic route folder app/[locale]/ để quản lý toàn bộ các trang theo mã ngôn ngữ:

src/
└── app/
    └── [locale]/
        ├── layout.js      # Layout bọc ngôn ngữ
        ├── page.js        # Trang chủ theo locale
        └── blog/
            └── page.js    # Trang blog theo locale

2. 3 Bước tích hợp next-intl cho Website đa ngôn ngữ

Bước 1: Khai báo file dịch JSON (messages/vi.json & messages/en.json)

// messages/vi.json
{
  "HomePage": {
    "title": "Thiết kế Website Next.js Chuyên Nghiệp",
    "subtitle": "Giải pháp bứt phá doanh số cho doanh nghiệp"
  }
}

Bước 2: Cấu hình Middleware tự động chuyển hướng ngôn ngữ

Tạo file middleware.js để tự động phát hiện ngôn ngữ trình duyệt của khách hàng và dẫn hướng về đúng /vi hoặc /en.

Bước 3: Tự động chèn thẻ hreflang chuẩn SEO Google

Sử dụng hàm generateMetadata chèn các liên kết thay thế (Alternate Links) giúp Google Bot hiểu chính xác trang tiếng Anh là phiên bản dịch của trang tiếng Việt (xem bài giao diện đa ngôn ngữ i18n).

Kết luận

Tích hợp i18n chuẩn mực giúp website của bạn sẵn sàng vươn tầm phục vụ khách hàng toàn cầu. Uwmee Software thiết lập hạ tầng website đa ngôn ngữ mượt mà cho doanh nghiệp. Đọc thêm bài viết Next.js Metadata API.