> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squarecloud.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Come ospitare un'applicazione Next.js

> Scopri come distribuire la tua applicazione Next.js su Square Cloud.

export const PortNote = ({lang}) => {
  if (lang == 'pt-br') {
    return <Note>
            <b>Qual porta devo usar para o meu servidor?</b><br />
            Você deve usar a porta <b>80</b> para o seu servidor. A porta 80 é a porta padrão para tráfego HTTP; a Square Cloud a encaminha para 443 (HTTPS) para estabelecer uma conexão segura.<br />
            Certifique-se de configurá-la antes de compactar e enviar seu projeto.
        </Note>;
  }
  return <Note>
            <b>What port should I use for my server?</b><br />
            You should use port <b>80</b> for your server. Port 80 is the default port for HTTP traffic, which is handled by Square Cloud to route it to 443, HTTPS, for a secure connection.<br />
            Make sure to configure it before compressing and uploading your project.
        </Note>;
};

export const RecommendedPlan = ({lang, plan, tier, cpu, appType}) => {
  const url = `https://squarecloud.app/${lang}/pay?plan=${plan.toLowerCase()}&tier=${tier}`;
  if (lang == 'en') {
    return <Note>
        <b>Wondering how much RAM and CPU your plan needs to host {appType}?</b><br />
        Don't worry, we're here to help.
        Our <a href={url}>{plan}</a> plan offers <b>{tier}GB</b> of RAM and <b>{cpu}vCPU</b>, which should be sufficient for most {appType}. 
        However, if you are working on a larger project and seeking extra stability, we recommend considering our <b>Pro</b> plan. With additional resources, you can maintain stability even during demand spikes. 
        To purchase, simply click <a href="https://squarecloud.app/en/pay?plan=pro">here</a>.
      </Note>;
  } else {
    return <Note>
          <b>Está se perguntando quanta RAM e CPU seu plano precisa para hospedar {appType}?</b><br />
          Não se preocupe, estamos aqui para ajudar.
          Nosso plano <a href={url}>{plan}</a> oferece <b>{tier}GB</b> de RAM e <b>{cpu}vCPU</b>, o que deve ser suficiente para a maioria dos {appType}.
          No entanto, se você estiver trabalhando em um projeto maior e precisar de mais estabilidade, recomendamos considerar nosso plano <b>Pro</b>.
          Com recursos adicionais, você pode manter a estabilidade mesmo durante picos de demanda.
          Para comprar, basta clicar <a href={`https://squarecloud.app/${lang}/pay?plan=pro`}>aqui</a>.
        </Note>;
  }
};

export const appType_0 = "un'applicazione Next.js"

## Introduzione

Per sviluppare e ospitare {appType_0} su Square Cloud, è essenziale seguire una sequenza strutturata di configurazioni e prerequisiti. Questa guida tecnica coprirà l'intero processo, dalla configurazione iniziale al deploy in produzione.

### Prerequisiti

* **Account Square Cloud**: Registrati tramite la [pagina di registrazione](https://squarecloud.app/it/signup) usando la tua email.
* **Piano a pagamento attivo**: Garantisce risorse dedicate e prestazioni ottimizzate per la tua applicazione. Consulta i nostri [piani disponibili](https://squarecloud.app/it/pricing) e scegli quello più adatto alle tue esigenze.

<RecommendedPlan appType="applicazioni Next.js" plan="Standard" tier="4" cpu="4" lang="it" />

## Creazione del progetto

Prima di iniziare, assicurati di avere Node.js e npm installati sul tuo sistema. Se non li hai ancora, puoi scaricarli dal [sito ufficiale di Node.js](https://nodejs.org/).

Per creare un nuovo progetto Next.js, esegui il seguente comando:

```bash theme={null}
npx create-next-app@latest my-app
```

In questo comando, `my-app` è il nome del tuo nuovo progetto. Puoi sostituire `my-app` con qualsiasi nome desideri per il tuo progetto. Il comando `npx` è uno strumento fornito con `npm`, il gestore di pacchetti di Node.js. Viene utilizzato per eseguire pacchetti Node.js installati localmente nel tuo progetto oppure disponibili in remoto sul registro npm.

`create-next-app` è un pacchetto disponibile sul registro npm che configura automaticamente un nuovo progetto Next.js. Si occupa di tutta la configurazione iniziale, come la creazione della directory del progetto, l'installazione delle dipendenze necessarie e la configurazione dei file di base.

`@latest` è un tag che specifica che vuoi utilizzare l'ultima versione del pacchetto `create-next-app`. Questo garantisce che tu stia sempre usando la versione più aggiornata e, di conseguenza, che tu abbia accesso alle funzionalità più recenti.

### Configurazione della porta 80

La porta 80 è la porta predefinita per il traffico HTTP. Per ospitare un sito web Next.js su Square Cloud, è fondamentale configurare l'uso della porta 80. In Next.js, puoi impostare il parametro `-p 80` nello script di avvio per garantire che il tuo sito web funzioni correttamente su questa porta.

```json package.json theme={null}
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 80",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "eslint": "^8",
    "eslint-config-next": "14.1.0"
  }
}
```

## Compilazione del progetto

Genera l'output di produzione prima di caricare:

```bash theme={null}
npm run build
```

Questo genererà il bundle di Next.js per la produzione, creando la cartella `.next`.

## Distribuzione

Dopo aver preparato i file del tuo progetto, puoi ora caricarli su Square Cloud e ospitare il tuo progetto.
Per farlo, crea un file ZIP contenente tutti i file del tuo progetto. \
Assicurati di non includere la cartella `cache` da `.next`.

<PortNote lang="it" />

### Tramite dashboard

<Steps>
  <Step title="Accedi alla pagina di upload">
    Accedi alla [pagina di upload](https://squarecloud.app/it/dashboard/new) e carica il file zip del tuo progetto.
  </Step>

  <Step title="Configura il tuo ambiente">
    Dopo aver caricato il tuo zip, dovrai configurare il nome, il file principale o il runtime environment e altre impostazioni per il tuo progetto.\
    Se stai caricando un progetto web, assicurati di selezionare "Web Publication" e di impostare un sottodominio per il tuo progetto.
  </Step>

  <Step title="Esegui il deploy del tuo progetto">
    Infine, clicca sul pulsante "Deploy" per ospitare il tuo progetto su Square Cloud.\
    Dopo il deploy, puoi monitorare lo stato e i log del tuo progetto dalla dashboard.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading.gif" alt="Caricamento dell'applicazione su Square Cloud" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Step>
</Steps>

### Tramite CLI

Per utilizzare questo metodo, devi creare un file di configurazione chiamato `squarecloud.app` nella directory principale del tuo progetto. Questo file conterrà la configurazione necessaria per il tuo progetto.

<Card title="Scopri di più su: come creare il file di configurazione per Square Cloud." icon="link" href="/it/getting-started/config-file">
  Il file squarecloud.app è un file di configurazione che verrà utilizzato per configurare la tua applicazione; verrà usato per definire il tuo ambiente.
</Card>

<Steps>
  <Step title="Installa la CLI">
    Per prima cosa, devi avere la CLI installata nel tuo ambiente. Se non la hai ancora, esegui il seguente comando nel tuo terminale:

    ```
    npm install -g @squarecloud/cli
    ```

    Se la hai già, ti consigliamo di aggiornarla. Per farlo, esegui il seguente comando nel tuo terminale:

    <Tabs>
      <Tab title="Windows">
        ```bash theme={null}
        squarecloud update
        ```
      </Tab>

      <Tab title="Linux, macOS e WSL">
        ```bash theme={null}
        curl -fsSL https://cli.squarecloud.app/install | bash
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Autenticati">
    Ora, per autenticarti e utilizzare gli altri comandi della CLI, troverai la tua chiave di autorizzazione [qui](https://squarecloud.app/it/account/security) cliccando su "Request API Key". Dopo aver ottenuto la tua chiave di autorizzazione, esegui il seguente comando:

    ```bash theme={null}
    squarecloud auth login
    ```
  </Step>

  <Step title="Carica il tuo progetto">
    Infine, per eseguire il deploy della tua applicazione su Square Cloud tramite la CLI, devi eseguire il seguente comando:

    ```bash theme={null}
    squarecloud upload 
    ```

    Oppure, se hai creato lo zip manualmente, puoi usare:

    ```bash theme={null}
    squarecloud upload --file <path/to/zip> 
    ```
  </Step>
</Steps>

## Risorse aggiuntive

Per maggiori informazioni su Next.js e i suoi strumenti, visita la [documentazione ufficiale di Next.js](https://nextjs.org/docs).
Lì troverai guide dettagliate, tutorial e documentazione delle API per aiutarti a sfruttare al meglio Next.js.

### CI/CD

Abbiamo una GitHub Action che semplifica l'aggiornamento del tuo progetto. Puoi vedere di più [qui](https://squarecloud.app/it/resources/github-action)\
Puoi creare un workflow come questo:

```yml theme={null}
name: "Deploy Nextjs app"
on:
  push:
    tags:
      - "v*"
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: Install dependencies
        run: npm install

      - name: Build website
        run: npm run build && chmod -R 777 .next next.config.ts package.json

      - name: Add website to zip
        run: zip -r project.zip package.json .next next.config.ts public -x ".next/cache/*"

      - name: Deploy on Square Cloud
        uses: squarecloudofc/github-action@v2
        with:
          command: commit --file project.zip ${{ secrets.SQUARECLOUD_APP_ID }} 
          token: '${{ secrets.SQUARE_CLOUD_TOKEN }}'
```

## Risoluzione dei problemi

<CardGroup cols={1}>
  ### Dominio personalizzato

  <Card horizontal>
    Per utilizzare un dominio personalizzato (ad esempio, `mysite.com`) invece dell'URL predefinito `mysite.squareweb.app`, hai bisogno del **piano Standard o superiore**. Il sottodominio è definito dal campo **SUBDOMAIN** nel file di configurazione.
  </Card>

  ### Requisiti minimi di RAM

  <Card horizontal>
    **Minimo: 512MB di RAM** per siti web/API semplici. Per siti con framework (Next.JS, React, Vue, Angular, ecc.), consigliamo sempre **almeno 1GB di RAM**. Per applicazioni più grandi, alloca più RAM per evitare che l'applicazione esaurisca la memoria e si arresti in modo anomalo.
  </Card>

  ### Impossibile trovare questo sito.

  <Card horizontal>
    Verifica che il **sottodominio/dominio** corrisponda a quanto configurato nel campo **SUBDOMAIN** o nelle **impostazioni del dominio personalizzato**. Se hai appena caricato il sito, attendi fino a **60 secondi** affinché Square abiliti il **primo accesso**.
  </Card>

  ### Il sito ha impiegato troppo tempo per rispondere...

  <Card horizontal>
    Verifica di aver configurato correttamente la **porta 80** e l'**host 0.0.0.0** nell'applicazione. Consigliamo di utilizzare le variabili d'ambiente forzate di Square: **PORT** e **HOST** dal file `.env`.
  </Card>
</CardGroup>

## Contattaci

Se continui a riscontrare **difficoltà tecniche**, il nostro **team di supporto specializzato** è disponibile ad assisterti. [**Contattaci**](https://squarecloud.app/it/support) e saremo felici di aiutarti a risolvere qualsiasi problema.