# gt-next: General Translation Next.js SDK: 示例
URL: https://generaltranslation.com/zh/docs/next/tutorials/examples.mdx
---
title: 示例
description: 使用 gt-next 进行国际化的 Next.js 应用示例
---

## 模式示例

以下示例分别展示了 `gt-next` 的一种特定功能或模式。

| 示例                | 说明                                                                 | 链接                                                                                                                                    |
| ----------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
| **`<T>` 组件基础**    | 用 `<T>` 包裹 JSX 以实现自动翻译                                             | [Demo](https://t-component-basics.generaltranslation.dev) · [GitHub](https://github.com/gt-examples/t-component-basics)               |
| **字典模式**          | 使用 `loadDictionary`、`useTranslations` 和 `getTranslations` 实现基于键的翻译 | [Demo](https://dictionary-pattern.generaltranslation.dev) · [GitHub](https://github.com/gt-examples/dictionary-pattern)               |
| **动态内容 (`tx`)**   | 使用 `tx()` 和 `<Tx>` 在 runtime 翻译动态内容                                | [Demo](https://dynamic-content-tx.generaltranslation.dev) · [GitHub](https://github.com/gt-examples/dynamic-content-tx)               |
| **共享字符串 (`msg`)** | 使用 `msg()` 定义共享字符串常量，并通过 `getMessages` 和 `useMessages` 按区域设置解析     | [Demo](https://shared-strings-msg.generaltranslation.dev) · [GitHub](https://github.com/gt-examples/shared-strings-msg)               |
| **静态站点生成**        | 在 build time 使用 `generateStaticParams` 为每个区域设置预渲染所有页面              | [Demo](https://static-site-generation.generaltranslation.dev) · [GitHub](https://github.com/gt-examples/static-site-generation)       |
| **本地翻译存储**        | 使用 `loadTranslations` 模式将翻译随构建产物一并交付——runtime 无需 CDN               | [Demo](https://local-translation-storage.generaltranslation.dev) · [GitHub](https://github.com/gt-examples/local-translation-storage) |
| **服务器元数据和 SEO**   | 为多语言 SEO 提供已翻译的元数据和 OG 标签                                          | [Demo](https://server-metadata-seo.generaltranslation.dev) · [GitHub](https://github.com/gt-examples/server-metadata-seo)             |

## 示例应用

在真实场景中演示 `gt-next` 的完整应用。

| 示例           | 描述                              | 链接                                                                                                                      |
| ------------ | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| **SaaS 仪表板** | 带有多页面的管理仪表板，支持基于区域设置的数据格式化和 RTL | [演示](https://saas-dashboard.generaltranslation.dev) · [GitHub](https://github.com/gt-examples/saas-dashboard)           |
| **航空预订**     | 支持多语言的航班预订应用，价格和日期会根据区域设置显示     | [演示](https://airline-booking.generaltranslation.dev) · [GitHub](https://github.com/gt-examples/airline-booking)         |
| **电影数据库**    | 使用 Next.js 15 构建的多语言电影目录        | [演示](https://movie-database.generaltranslation.dev) · [GitHub](https://github.com/gt-examples/movie-database)           |
| **食谱应用**     | 食谱浏览应用，数量、温度和份数会根据区域设置显示        | [演示](https://recipe-app.generaltranslation.dev) · [GitHub](https://github.com/gt-examples/recipe-app)                   |
| **定价页**      | 多语言 SaaS 定价页面                   | [演示](https://pricing-page.generaltranslation.dev) · [GitHub](https://github.com/gt-examples/pricing-page)               |
| **招聘看板**     | 职位列表应用，货币、日期和复数形式会根据区域设置显示      | [演示](https://job-board.generaltranslation.dev) · [GitHub](https://github.com/gt-examples/job-board)                     |
| **开发者作品集**   | 多语言开发者作品集                       | [演示](https://developer-portfolio.generaltranslation.dev) · [GitHub](https://github.com/gt-examples/developer-portfolio) |
| **航班状态**     | 带有 Solari 翻页显示板和航线可视化的航班追踪应用    | [演示](https://flight-status.generaltranslation.dev) · [GitHub](https://github.com/gt-examples/flight-status)             |

<Callout>
  在 [app-catalog.generaltranslation.dev](https://app-catalog.generaltranslation.dev) 或 [GitHub](https://github.com/gt-examples) 查看所有示例。
</Callout>

## monorepo 示例

这些示例位于 [`generaltranslation/gt`](https://github.com/generaltranslation/gt/tree/main/examples) monorepo 仓库中。

| 示例                     | 描述                                   | 链接                                                                                                                                     |
| ---------------------- | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
| **Next.js 入门模板**       | `gt-next` 入门模板                       | [演示](https://gt-next-starter.vercel.app) · [GitHub](https://github.com/generaltranslation/gt/tree/main/examples/next-gt-starter)       |
| **Next.js create app** | 默认的 `create-next-app`，已集成 `gt-next`  | [演示](https://next-create-app-eight.vercel.app) · [GitHub](https://github.com/generaltranslation/gt/tree/main/examples/next-create-app) |
| **AI 聊天机器人**           | 基于 Vercel AI Chatbot 模板的多语言 AI 聊天机器人 | [演示](https://example-ai-chatbot-ten.vercel.app) · [GitHub](https://github.com/generaltranslation/gt/tree/main/examples/next-chatbot)   |
| **Next.js SSG**        | 静态生成的多语言 Next.js 应用                  | [GitHub](https://github.com/generaltranslation/gt/tree/main/examples/next-ssg)                                                         |
| **Pages Router**       | 集成 `gt-react` 的 Next.js Pages Router | [演示](https://next-pages-router.vercel.app) · [GitHub](https://github.com/generaltranslation/gt/tree/main/examples/next-pages-router)   |