Tích hợp Next.js: Tài liệu Hook useIntlayer

Hook useIntlayer được thiết kế riêng cho các ứng dụng Next.js nhằm lấy và quản lý nội dung bản địa hóa một cách hiệu quả. Tài liệu này sẽ tập trung vào cách sử dụng hook trong các dự án Next.js, đảm bảo thực hành bản địa hóa đúng chuẩn.

Nhập khẩu useIntlayer trong Next.js

Tùy thuộc vào việc bạn đang làm việc với các thành phần phía client hay phía server trong ứng dụng Next.js, bạn có thể nhập hook useIntlayer như sau:

• Thành phần Client:

  typescript

  Sao chép nội dung

  Sao chép mã

  Sao chép đoạn mã vào khay nhớ tạm (clipboard)

  import { useIntlayer } from "next-intlayer"; // Sử dụng trong các thành phần phía client

• Thành phần Server:

  tsx

  Sao chép nội dung

  Sao chép mã

  Sao chép đoạn mã vào khay nhớ tạm (clipboard)

  import { useIntlayer } from "next-intlayer/server"; // Sử dụng trong các thành phần phía server

Tham số

1. key: Một chuỗi định danh cho khóa từ điển mà bạn muốn lấy nội dung.
2. locale (tùy chọn): Một locale cụ thể để sử dụng. Nếu không cung cấp, hook sẽ mặc định sử dụng locale được thiết lập trong ngữ cảnh client hoặc server.

Các tệp Từ điển

Việc tất cả các khóa nội dung phải được định nghĩa trong các tệp khai báo nội dung là rất quan trọng để tránh lỗi khi chạy và đảm bảo an toàn kiểu. Cách tiếp cận này cũng hỗ trợ tích hợp TypeScript để kiểm tra lỗi trong thời gian biên dịch.

Hướng dẫn thiết lập các tệp khai báo nội dung có sẵn tại đây.

Ví dụ sử dụng trong Next.js

Dưới đây là cách bạn có thể triển khai hook useIntlayer trong một trang Next.js để tải nội dung đa ngôn ngữ một cách động dựa trên locale hiện tại của ứng dụng:

import { ClientComponentExample } from "@components/ClientComponentExample";
import { ServerComponentExample } from "@components/ServerComponentExample";
import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";
import { useIntlayer, IntlayerServerProvider } from "next-intlayer/server";

const HomePage: NextPageIntlayer = async ({ params }) => {
  const { locale } = await params;

  const content = useIntlayer("homepage", locale);

  return (
    <>
      <p>{content.introduction}</p>
      <IntlayerClientProvider locale={locale}>
        <ClientComponentExample />
      </IntlayerClientProvider>
      <IntlayerServerProvider locale={locale}>
        <ServerComponentExample />
      </IntlayerServerProvider>
    </>
  );
};

"use-client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const ClientComponentExample: FC = () => {
  const content = useIntlayer("component-content");

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};

tsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
import type { FC } from "react";
import { useIntlayer } from "next-intlayer/server";

const ServerComponentExample: FC = () => {
  const content = useIntlayer("component-content");

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};

Xử lý Đa ngôn ngữ cho Thuộc tính

Để đa ngôn ngữ hóa các thuộc tính như alt, title, href, aria-label, v.v., hãy đảm bảo bạn tham chiếu nội dung một cách chính xác:

<img src={content.image.src.value} alt={content.image.alt.value} /><img src={content.image.src.toString()} alt={content.image.alt.toString()} /><img src={String(content.image.src)} alt={String(content.image.alt)} />

Thông tin thêm

• Trình chỉnh sửa trực quan Intlayer: Tìm hiểu cách sử dụng trình chỉnh sửa trực quan để quản lý nội dung dễ dàng hơn tại đây.

Tài liệu này trình bày cách sử dụng hook useIntlayer đặc biệt trong môi trường Next.js, cung cấp một giải pháp mạnh mẽ để quản lý đa ngôn ngữ trên các ứng dụng Next.js của bạn.