快速開始

Next.js

本頁示範 Intor 在 Next.js 專案中的最小整合流程。

安裝

本範例以 Next.js App Router（src/ 結構）為前提，詳見：Next.js 。

安裝 Intor：

npm install intor
yarn add intor
pnpm add intor
bun add intor

專案結構

index.json
U
index.json
U
layout.tsx
M
page.tsx
M
intor-config.ts
U
intor-client-provider.tsx
U

整合步驟

♯1 翻譯內容

在專案中建立 messages 資料夾，並依語系建立子資料夾，每個語系提供一個 index.json。

index.json
U
index.json
U
{
  "hello": "Hello, {name}",
  "rich": "A <tag>text</tag>."
}
{
  "hello": "Bonjour, {name}",
  "rich": "Un <tag>texte</tag>."
}

♯2 設定檔

在 src/ 下建立 i18n/ 資料夾，並於其中建立 intor-config.ts。
本範例採用最基本的翻譯內容載入方式，直接將 messages 定義於設定檔中。

詳見：載入翻譯內容 

intor-config.ts
U
import { defineIntorConfig } from "intor";
import EN from "../../messages/en/index.json";
import FR from "../../messages/fr/index.json";

export const intorConfig = defineIntorConfig({
  defaultLocale: "en",
  supportedLocales: ["en", "fr"],
  messages: {
    en: EN,
    fr: FR,
  },
});

♯3 初始化

在 i18n/ 資料夾中建立 intor-client-provider.tsx。

intor-client-provider.tsx
U
import type { ReactNode } from "react";
import { IntorProvider, type IntorValue } from "intor/react";

export function IntorClientProvider({
  value,
  children,
}: {
  value: IntorValue;
  children: ReactNode;
}) {
  return <IntorProvider value={value}>{children}</IntorProvider>;
}

接著，在 layout.tsx 中呼叫 intor() 初始化翻譯系統，並將其回傳的值傳入 IntorClientProvider。

layout.tsx
M
// ...
import { intor } from "intor/next/server";
import { intorConfig } from "@/i18n/intor-config";
import { IntorClientProvider } from "@/i18n/intor-client-provider";

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const value = await intor(intorConfig);

  return (
    <html lang={value.locale}>
      <body>
        <IntorClientProvider value={value}>{children}</IntorClientProvider>
      </body>
    </html>
  );
}

使用範例

透過 useTranslator 取得翻譯相關能力：

  • t：取得對應文字
  • tRich：渲染包含語意 tag 的結構化翻譯內容

<Link />：負責處理頁面導航與語系切換

page.tsx
M
"use client";

import { useTranslator } from "intor/react";
import { Link } from "intor/next";

export default function Home() {
  const { t, tRich } = useTranslator();

  return (
    <>
      <p>{t("hello", { name: "Intor" })}</p>

      <p>{tRich("rich", { tag: (children) => <b>{children}</b> })}</p>

      <Link locale="en">English</Link>
      <Link locale="fr">French</Link>
    </>
  );
}

Server-side

於 server-side 中，也可以透過 getTranslator() 取得相同的翻譯能力。
可用於 metadata 生成、API routes 或其他 server-only 執行環境。

layout.tsx
M
// ...
import { Metadata } from "next";
import { getTranslator } from "intor/next/server";

export const generateMetadata = async (): Promise<Metadata> => {
  const { t } = await getTranslator(intorConfig);
  return { title: t("hello") };
};
// ...
載入翻譯內容
深入瞭解 Intor 在 Next.js 專案中的翻譯內容載入方式。
路由與導向
深入瞭解 Intor 在 Next.js 專案中的路由整合方式。
型別安全
深入了解如何在 Next.js 專案中啟用 Intor 的型別安全機制。

On this page