# gt-next: General Translation Next.js SDK: 设置
URL: https://generaltranslation.com/zh/docs/next/tutorials/examples/currency-converter/setup.mdx
---
title: 设置
description: 搭建一个教程项目
---

## 简介

这是一篇更深入的教程，讲解如何使用 `gt-next` 搭建一个非常简单的 Next.js 项目。
我们会带你从头到尾完成整个流程，包括先搭建项目，再为其添加翻译。
在本教程中，我们会从简单概念逐步深入到更高级的概念。
本教程假定你对 TypeScript、Next.js 和 React 有基本了解。

下面是本教程将涵盖的内容：

* 搭建一个新的 Next.js 项目
* 使用 `<T>` 组件翻译应用
* 使用 `<Var>`、`<Currency>`、`<DateTime>` 和 `<Num>` 等变量组件翻译动态内容
* 使用 `<Plural>` 和 `<Branch>` 等 branch 组件翻译条件内容
* 在应用中使用 i18n 路由

我们的应用会是一个简单的汇率换算应用，用于查看不同货币之间的兑换汇率。
为了尽可能保持最精简，我们只会使用内联样式，并且只使用 `gt-next` 库。
这个示例基于 GeeksforGeeks 上的 [Currency Converter](https://www.geeksforgeeks.org/how-to-create-a-currency-converter-app-in-reactjs/) 教程构建。

## 设置你的 Next 应用

首先，创建一个新的 Next.js 应用。你可以运行以下命令：

```bash copy
npx create-next-app@latest
```

这会带你进入设置向导，你可以在这里选择应用名称以及要使用的 template。
本教程中，请将名称设为 `currencies`，并在系统询问你是否要使用 TypeScript 时选择 `Yes`。

进入项目目录，然后启动应用吧！

```bash copy
cd currencies
npm install
npm run dev
```

这会在 `http://localhost:3000` 启动应用。


## 来添加一些内容吧！

现在应用已经搭建好了，接下来我们把应用内容替换成一个简单的货币转换器。
只需将下面的代码复制粘贴到 `src/app/page.tsx` 和 `src/app/layout.tsx` 文件中。

暂时不用太在意它的具体实现。
这段代码只是模拟调用一个货币汇率 API，并显示两种货币之间的汇率。

<Tabs items={['layout.tsx', 'page.tsx']}>
  <Tab value="page.tsx">
    ```jsx title="src/app/page.tsx" copy
    "use client";

    import { useEffect, useState, useCallback } from "react";

    // 两种货币及其汇率之间的映射（from -> to）
    type ExchTable = Record<string, Record<string, number>>;

    const EXCH_RATES: ExchTable = {
      usd: { usd: 1, inr: 73.5, eur: 0.85, jpy: 105.45, gbp: 0.72 },
      inr: { usd: 0.014, inr: 1, eur: 0.012, jpy: 1.46, gbp: 0.01 },
      eur: { usd: 1.18, inr: 85.5, eur: 1, jpy: 123.5, gbp: 0.85 },
      jpy: { usd: 0.0095, inr: 0.68, eur: 0.0081, jpy: 1, gbp: 0.0068 },
      gbp: { usd: 1.39, inr: 99.5, eur: 1.17, jpy: 146.5, gbp: 1 },
    };

    // 按钮样式
    const buttonStyle = {
      backgroundColor: "#007bff",
      color: "white",
      border: "none",
      padding: "10px 20px",
      cursor: "pointer",
      borderRadius: "5px",
      fontSize: "16px",
      margin: "20px",
    };

    /**
     * 此函数用于模拟获取当前汇率的 API 请求。
     * 返回汇率前等待 1 秒。
     * @returns 两种货币之间的汇率
     */
    async function fetchExchangeRate(from: string, to: string): Promise<number> {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      return EXCH_RATES[from][to];
    }

    function Page() {
      // 汇率
      const [info, setInfo] = useState<ExchTable>({});
      const options = ["usd", "inr", "eur", "jpy", "gbp"];

      // 货币
      const [from, setFrom] = useState("usd");
      const [to, setTo] = useState("inr");

      // 数值
      const [input, setInput] = useState(0);
      const [output, setOutput] = useState(0);

      // 货币转换函数
      const convert = useCallback(() => {
        if (info?.[from]?.[to]) {
          const rate = info[from][to];
          setOutput(input * rate);
        } else {
          setOutput(0);
        }
      }, [info, input, to, from]);

      // 当源货币或目标货币发生变化时调用 API
      useEffect(() => {
        // 如果汇率已存在，则直接转换
        if (info?.[from]?.[to]) {
          convert();
          return;
        }
        // 获取汇率
        (async () => {
          const response = await fetchExchangeRate(from, to);
          // 写入新数据，不覆盖旧数据
          setInfo((prevInfo) => ({
            ...prevInfo,
            [from]: {
              ...(prevInfo?.[from] || undefined),
              [to]: response,
            },
          }));
        })();
      }, [from, to, convert, info]);

      // 用户切换货币时调用转换函数
      useEffect(() => {
        convert();
      }, [info, convert]);

      // 切换两种货币的函数
      function flip() {
        const temp = from;
        setFrom(to);
        setTo(temp);
      }

      return (
        <div style={{ margin: "0 auto", width: "50%", textAlign: "center" }}>
          <div style={{ margin: "20px 0", paddingBottom: "20px" }}>
            <h1 style={{ fontSize: "2.5em", fontWeight: "bold" }}>
              货币转换器
            </h1>
          </div>
          <div style={{ flex: 2, textAlign: "center", margin: "20px 0" }}>
            <h3>金额</h3>
            <input
              type="text"
              placeholder="请输入金额"
              style={{ textAlign: "center" }}
              onChange={(e) => {
                setInput(Number(e.target.value));
              }}
            />
          </div>
          <div
            style={{ display: "flex", justifyContent: "center", margin: "20px 0" }}
          >
            <div style={{ flex: 1, textAlign: "center" }}>
              <label htmlFor="from">
                <h3>源货币</h3>
              </label>
              <select
                name="from"
                id="from"
                value={from}
                onChange={(e) => setFrom(e.target.value)}
              >
                {options.map((option) => (
                  <option key={option} value={option}>
                    {option.toUpperCase()}
                  </option>
                ))}
              </select>
            </div>
            <div style={{ flex: 1, textAlign: "center" }}>
              <button
                onClick={() => {
                  flip();
                }}
                style={buttonStyle}
              >
                互换
              </button>
            </div>
            <div style={{ flex: 1, textAlign: "center" }}>
              <label htmlFor="to">
                <h3>目标货币</h3>
              </label>
              <select
                name="to"
                id="to"
                value={to}
                onChange={(e) => setTo(e.target.value)}
              >
                {options.map((option) => (
                  <option key={option} value={option}>
                    {option.toUpperCase()}
                  </option>
                ))}
              </select>
            </div>
          </div>
          <div style={{ margin: "0 auto", width: "50%", textAlign: "center" }}>
            <button
              onClick={() => {
                convert();
              }}
              style={buttonStyle}
            >
              转换
            </button>
            <h2>转换结果：</h2>
            <p>{input + " " + from + " = " + output.toFixed(2) + " " + to}</p>
          </div>
        </div>
      );
    }

    export default Page;
    ```
  </Tab>

  <Tab value="layout.tsx">
    ```jsx title="src/app/layout.tsx" copy
    import type { Metadata } from "next";
    import { Geist, Geist_Mono } from "next/font/google";
    import "./globals.css";

    const geistSans = Geist({
      variable: "--font-geist-sans",
      subsets: ["latin"],
    });

    const geistMono = Geist_Mono({
      variable: "--font-geist-mono",
      subsets: ["latin"],
    });

    export const metadata: Metadata = {
      title: "Currency Converter",
      description: "A simple currency converter",
    };

    export default function RootLayout({
      children,
    }: Readonly<{
      children: React.ReactNode;
    }>) {
      return (
        <html lang="en">
          <body
            className={`${geistSans.variable} ${geistMono.variable} antialiased`}
          >
            {children}
          </body>
        </html>
      );
    }

    ```
  </Tab>
</Tabs>

## 总结