Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

# Distribuisci un'app Next.js su Amplify Hosting
<a name="getting-started-next"></a>

Questo tutorial illustra la creazione e la distribuzione di un'applicazione Next.js da un repository Git.

Prima di iniziare questo tutorial, completa i seguenti prerequisiti.

**Registrati per un Account AWS**  
Se non sei già un AWS cliente, devi [crearne uno Account AWS](https://portal.aws.amazon.com/billing/signup#/start/email) seguendo le istruzioni online. La registrazione ti consente di accedere ad Amplify e AWS ad altri servizi che puoi utilizzare con la tua applicazione.

**Creazione di un'applicazione**  
Crea un'applicazione Next.js di base da utilizzare per questo tutorial, utilizzando le [create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app)istruzioni nella documentazione di *Next.js*.

**Crea un repository Git**  
Amplify GitHub supporta, GitLab Bitbucket e. AWS CodeCommit Invia la tua `create-next-app` applicazione al tuo repository Git.

## Passaggio 1: Connect un repository Git
<a name="step-1-connect-repository"></a>

In questo passaggio, connetti la tua applicazione Next.js in un repository Git ad Amplify Hosting.

**Per connettere un'app in un repository Git**

1. Apri la console [Amplify](https://console.aws.amazon.com/amplify/).

1. Se stai distribuendo la tua prima app nella regione corrente, per impostazione predefinita inizierai dalla pagina del **AWS Amplify**servizio.

   Scegli **Distribuisci un'app** nella parte superiore della pagina.

1. **Nella pagina **Inizia a creare con Amplify**, scegli il tuo provider di repository Git, quindi scegli Avanti.**

   Per gli GitHub archivi, Amplify utilizza la funzione App per autorizzare GitHub l'accesso ad Amplify. Per ulteriori informazioni sull'installazione e l'autorizzazione dell'App, consulta. GitHub [Configurazione dell'accesso Amplify ai repository GitHub](setting-up-GitHub-access.md)
**Nota**  
*Dopo aver autorizzato la console Amplify con Bitbucket GitLab, AWS CodeCommit oppure, Amplify recupera un token di accesso dal provider del repository, ma non lo archivia sui server.* AWS Amplify accede al repository utilizzando chiavi di distribuzione installate solo in uno specifico repository.

1. **Nella pagina Aggiungi ramo del repository, procedi come segue:**

   1. Seleziona il nome del repository da connettere.

   1. Seleziona il nome del ramo del repository da connettere.

   1. Scegli **Next (Successivo)**.

## Passaggio 2: Conferma le impostazioni di build
<a name="step-2a-confirm-build-settings-for-the-front-end"></a>

Amplify rileva automaticamente la sequenza di comandi di compilazione da eseguire per il ramo che stai distribuendo. In questo passaggio rivedi e confermi le impostazioni di build.

**Per confermare le impostazioni di build per un'app**

1. Nella pagina **delle impostazioni dell'app**, individua la sezione **Impostazioni di creazione**.

   Verifica che il **comando Frontend build** e la **directory di output Build** siano corretti. Per questa app di esempio Next.js, la **directory di output Build** è impostata su. `.next`

1. La procedura per aggiungere un ruolo di servizio varia a seconda che si desideri creare un nuovo ruolo o utilizzarne uno esistente.
   + Per creare un nuovo ruolo:

     1. Scegliere **Crea e utilizza un nuovo ruolo di servizio**.
   + Per utilizzare un ruolo esistente:

     1. Scegli **Usa un ruolo esistente**.

     1. Nell'elenco dei ruoli di servizio, seleziona il ruolo da utilizzare.

1. Scegli **Next (Successivo)**.

## Fase 3: Distribuire l'applicazione
<a name="step-3-save-and-deploy"></a>

In questa fase distribuisci la tua app nella rete AWS globale di distribuzione dei contenuti (CDN).

**Per salvare e distribuire un'app**

1. Nella pagina di **revisione**, verifica che i dettagli del repository e le impostazioni dell'app siano corretti.

1. Scegliere **Save and deploy (Salva e distribuisci)**. La creazione del front-end richiede in genere da 1 a 2 minuti, ma può variare in base alle dimensioni dell'app.

1. Una volta completata la distribuzione, puoi visualizzare l'app utilizzando il link al dominio `amplifyapp.com` predefinito.

**Nota**  
[Per aumentare la sicurezza delle tue applicazioni Amplify, il dominio amplifyapp.com è registrato *nella Public* Suffix List (PSL).](https://publicsuffix.org/) Per una maggiore sicurezza, ti consigliamo di utilizzare i cookie con un `__Host-` prefisso se hai bisogno di impostare cookie sensibili nel nome di dominio predefinito per le tue applicazioni Amplify. Questa pratica ti aiuterà a difendere il tuo dominio dai tentativi CSRF (cross-site request forgery). Per ulteriori informazioni, consulta la pagina [Impostazione cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes) nella pagina Mozilla Developer Network.

## Fase 4: (Facoltativo) pulire le risorse
<a name="step-4-clean-up"></a>

Se non ti serve più l'app che hai distribuito per il tutorial, puoi eliminarla. In questo modo hai la certezza che non ti vengano addebitati costi per risorse che non stai utilizzando.

**Per eliminare un'app**

1. Dal menu **delle impostazioni dell'app** nel riquadro di navigazione, scegli **Impostazioni generali**.

1. Nella pagina **delle impostazioni generali**, scegli **Elimina app**.

1. Nella finestra di conferma, inserisci**delete**. Quindi scegli **Elimina app**.

## Aggiungi funzionalità alla tua app
<a name="next-steps"></a>

Ora che hai un'app distribuita su Amplify, puoi esplorare alcune delle seguenti funzionalità disponibili per la tua applicazione ospitata.

**Variabili di ambiente**  
Le applicazioni spesso richiedono informazioni di configurazione in fase di esecuzione. Queste configurazioni possono essere dettagli di connessione al database, chiavi API o parametri. Le variabili di ambiente forniscono un modo per esporre queste configurazioni in fase di compilazione. Per ulteriori informazioni, consulta [Variabili di ambiente](environment-variables.md).

**Domini personalizzati**  
In questo tutorial, Amplify ospita la tua app per te sul dominio `amplifyapp.com` predefinito con un URL come. `https://branch-name.d1m7bkiki6tdw1.amplifyapp.com` Quando colleghi la tua app a un dominio personalizzato, gli utenti vedono che la tua app è ospitata su un URL personalizzato, ad esempio. `https://www.example.com` Per ulteriori informazioni, consulta [Configurazione di domini personalizzati](custom-domains.md).

**Anteprime delle pull request**  
Le anteprime delle richieste pull web offrono ai team un modo per visualizzare in anteprima le modifiche apportate alle pull request (PRs) prima di unire il codice a un ramo di produzione o di integrazione. Per ulteriori informazioni, vedete [Anteprime Web per](pr-previews.md) le richieste pull.

**Gestione di più ambienti**  
Per scoprire come Amplify funziona con feature branch GitFlow e flussi di lavoro per supportare più implementazioni, [consulta](multi-environments.md) Distribuzioni di feature branch e flussi di lavoro di team.