# gt-next: General Translation Next.js SDK: Настройка
URL: https://generaltranslation.com/ru/docs/next/tutorials/examples/currency-converter/setup.mdx
---
title: Настройка
description: Настройте проект для этого руководства
---

## Введение

Это более подробное руководство по настройке очень простого проекта Next.js с использованием `gt-next`.
Мы проведем вас через весь процесс от начала до конца: от настройки проекта до его перевода.
По ходу этого руководства мы будем постепенно переходить от простых концепций к более продвинутым.
Предполагается, что вы в целом знакомы с TypeScript, Next.js и React.

Вот список тем, которые мы рассмотрим в этом руководстве:

* Настройка нового проекта Next.js
* Использование компонента `<T>` для перевода приложения
* Использование переменных компонентов, таких как `<Var>`, `<Currency>`, `<DateTime>` и `<Num>`, для перевода динамического контента
* Использование компонентов branch, таких как `<Plural>` и `<Branch>`, для перевода условного контента
* Использование i18n-маршрутизации в приложении

Наше приложение будет простым: оно позволит нам проверять обменный курс между валютами.
Чтобы всё было как можно проще, мы будем использовать только инлайн-стили и только библиотеку `gt-next`.
Этот пример основан на руководстве [Currency Converter](https://www.geeksforgeeks.org/how-to-create-a-currency-converter-app-in-reactjs/) на GeeksforGeeks.

## Настройте приложение Next

Сначала создадим новое приложение Next.js. Для этого выполните следующую команду:

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

Это приведет вас к мастеру сетапа, где вы сможете выбрать имя приложения и template, который хотите использовать.
Для этого руководства используйте имя `currencies` и выберите `Yes`, когда вас спросят, хотите ли вы использовать TypeScript.

Перейдите в каталог проекта и давайте запустим приложение!

```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";

    // Таблица обменных курсов между двумя валютами (из -> в)
    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>

## Заключение