# gt-next: General Translation Next.js SDK: Setup
URL: https://generaltranslation.com/it/docs/next/tutorials/examples/currency-converter/setup.mdx
---
title: Setup
description: Configura un progetto per il tutorial
---

## Introduzione

Questa è una guida più approfondita su come configurare un progetto Next.js molto semplice usando `gt-next`.
Ti accompagneremo dall'inizio alla fine, dalla configurazione del progetto fino alla sua traduzione.
Nel corso di questo tutorial passeremo gradualmente dai concetti più semplici a quelli più avanzati.
Questo tutorial presuppone una conoscenza di base di TypeScript, Next.js e React.

Ecco un elenco degli argomenti che tratteremo in questo tutorial:

* Configurare un nuovo progetto Next.js
* Usare il componente `<T>` per tradurre un&#39;app
* Usare componenti variabili come `<Var>`, `<Currency>`, `<DateTime>` e `<Num>` per tradurre contenuti dinamici
* Usare componenti di branch come `<Plural>` e `<Branch>` per tradurre contenuti condizionali
* Usare il routing i18n nella tua app

La nostra app sarà una semplice applicazione che ci permetterà di verificare il tasso di conversione tra valute.
Useremo solo stili inline e solo la libreria `gt-next`, per mantenere il tutto il più essenziale possibile.
Questo esempio è stato realizzato sulla base del tutorial [Currency Converter](https://www.geeksforgeeks.org/how-to-create-a-currency-converter-app-in-reactjs/) su GeeksforGeeks.

## Configura la tua app Next

Per prima cosa, crea una nuova app Next.js. Puoi farlo eseguendo il seguente comando:

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

Questo ti porterà alla procedura guidata di setup, dove puoi scegliere il nome della tua app e il template da usare.
Per questo tutorial, usa il nome `currencies` e seleziona `Yes` quando ti viene chiesto se vuoi usare TypeScript.

Vai alla directory del progetto e avviamo l’app!

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

Questo avvierà l&#39;app all&#39;indirizzo `http://localhost:3000`.


## Aggiungiamo un po&#39; di contenuto!

Ora che abbiamo configurato l&#39;app, sostituiamone il contenuto per mostrare un semplice convertitore di valute.
Copia e incolla il codice seguente nei file `src/app/page.tsx` e `src/app/layout.tsx`.

Per ora non preoccuparti troppo di come funzioni.
Questo codice si limita a simulare una richiesta a un&#39;API di cambio valuta e a mostrare il tasso di cambio tra due valute.

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

    // Una mappa tra due valute e il loro tasso di cambio (da -> a)
    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 },
    };

    // alcuni stili per il pulsante
    const buttonStyle = {
      backgroundColor: "#007bff",
      color: "white",
      border: "none",
      padding: "10px 20px",
      cursor: "pointer",
      borderRadius: "5px",
      fontSize: "16px",
      margin: "20px",
    };

    /**
     * Questa funzione simula una richiesta API per ottenere il tasso di cambio corrente.
     * Attende 1 secondo prima di restituire il tasso di cambio.
     * @returns il tasso di cambio tra due valute
     */
    async function fetchExchangeRate(from: string, to: string): Promise<number> {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      return EXCH_RATES[from][to];
    }

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

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

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

      // Funzione per convertire la valuta
      const convert = useCallback(() => {
        if (info?.[from]?.[to]) {
          const rate = info[from][to];
          setOutput(input * rate);
        } else {
          setOutput(0);
        }
      }, [info, input, to, from]);

      // Chiamata all'API ogni volta che cambia la valuta di origine o di destinazione
      useEffect(() => {
        // Se il tasso di cambio è già disponibile, esegui la conversione
        if (info?.[from]?.[to]) {
          convert();
          return;
        }
        // Recupera il tasso di cambio
        (async () => {
          const response = await fetchExchangeRate(from, to);
          // Aggiunge la nuova risposta senza sovrascrivere i dati precedenti
          setInfo((prevInfo) => ({
            ...prevInfo,
            [from]: {
              ...(prevInfo?.[from] || undefined),
              [to]: response,
            },
          }));
        })();
      }, [from, to, convert, info]);

      // Chiama convert ogni volta che l'utente cambia la valuta
      useEffect(() => {
        convert();
      }, [info, convert]);

      // Funzione per invertire le due valute
      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" }}>
              Convertitore di valuta
            </h1>
          </div>
          <div style={{ flex: 2, textAlign: "center", margin: "20px 0" }}>
            <h3>Importo</h3>
            <input
              type="text"
              placeholder="Inserisci l'importo"
              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>Da</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}
              >
                Inverti
              </button>
            </div>
            <div style={{ flex: 1, textAlign: "center" }}>
              <label htmlFor="to">
                <h3>A</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}
            >
              Converti
            </button>
            <h2>Importo convertito:</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>

## Conclusione