> ## 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.

# Comment héberger une application Next.js

> Apprenez à déployer votre application Next.js sur 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 = "a Next.js application"

## Introduction

Pour développer et héberger {appType_0} sur Square Cloud, il est essentiel de suivre une séquence structurée de configurations et de prérequis. Ce guide technique couvrira l'ensemble du processus, de la configuration initiale au déploiement en production.

### Prérequis

* **Compte Square Cloud** : Inscrivez-vous via la [page d'inscription](https://squarecloud.app/fr/signup) en utilisant votre adresse e-mail.
* **Plan payant actif** : Garantit des ressources dédiées et des performances optimisées pour votre application. Consultez nos [plans disponibles](https://squarecloud.app/fr/pricing) et choisissez celui qui convient le mieux à vos besoins.

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

## Création du projet

Avant de commencer, assurez-vous d'avoir Node.js et npm installés sur votre système. Si vous ne les avez pas encore, vous pouvez les télécharger depuis le [site officiel de Node.js](https://nodejs.org/).

Pour créer un nouveau projet Next.js, exécutez la commande suivante :

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

Dans cette commande, `my-app` est le nom de votre nouveau projet. Vous pouvez remplacer `my-app` par le nom de votre choix pour votre projet. La commande `npx` est un outil fourni avec `npm`, le gestionnaire de paquets de Node.js. Elle sert à exécuter des paquets Node.js installés localement dans votre projet ou disponibles à distance sur le registre npm.

`create-next-app` est un paquet disponible sur le registre npm qui configure automatiquement un nouveau projet Next.js. Il prend en charge toute la configuration initiale, comme la création du répertoire du projet, l'installation des dépendances nécessaires et la configuration des fichiers de base.

`@latest` est une balise indiquant que vous souhaitez utiliser la dernière version du paquet `create-next-app`. Cela garantit que vous utilisez toujours la version la plus à jour et, par conséquent, que vous avez accès aux dernières fonctionnalités.

### Configuration du port 80

Le port 80 est le port par défaut pour le trafic HTTP. Pour héberger un site web Next.js sur Square Cloud, il est essentiel de configurer l'utilisation du port 80. Dans Next.js, vous pouvez définir le paramètre `-p 80` dans le script de démarrage afin de garantir que votre site web fonctionne correctement sur ce port.

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

## Compilation du projet

Compilez la sortie de production avant l'envoi :

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

Cela génère le bundle Next pour la production, en créant le dossier `.next`.

## Déploiement

Après avoir préparé les fichiers de votre projet, vous pouvez désormais les envoyer sur Square Cloud et héberger votre projet.
Pour ce faire, créez un fichier ZIP contenant tous les fichiers de votre projet. \
Veillez à ne pas inclure le dossier `cache` de `.next`.

<PortNote lang="fr" />

### Via le tableau de bord

<Steps>
  <Step title="Accéder à la page d'upload">
    Accédez à la [page d'upload](https://squarecloud.app/fr/dashboard/new) et téléversez le fichier zip de votre projet.
  </Step>

  <Step title="Configurer votre environnement">
    Après avoir téléversé votre zip, vous devrez configurer le nom, le fichier principal ou l'environnement d'exécution ainsi que d'autres paramètres de votre projet.\
    Si vous téléversez un projet web, veillez à sélectionner « Publication Web » et à définir un sous-domaine pour votre projet.
  </Step>

  <Step title="Déployer votre projet">
    Enfin, cliquez sur le bouton « Deploy » pour héberger votre projet sur Square Cloud.\
    Une fois le déploiement effectué, vous pouvez suivre l'état et les logs de votre projet depuis le tableau de bord.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading.gif" alt="Téléversement d'une application vers Square Cloud" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Step>
</Steps>

### Via la CLI

Pour utiliser cette méthode, vous devez créer un fichier de configuration nommé `squarecloud.app` à la racine de votre projet. Ce fichier contiendra la configuration nécessaire à votre projet.

<Card title="En savoir plus : comment créer le fichier de configuration pour Square Cloud." icon="link" href="/fr/getting-started/config-file">
  Le fichier squarecloud.app est un fichier de configuration qui servira à configurer votre application ; il sera utilisé pour définir votre environnement.
</Card>

<Steps>
  <Step title="Installer la CLI">
    Tout d'abord, vous devez avoir la CLI installée dans votre environnement. Si ce n'est pas encore le cas, exécutez la commande suivante dans votre terminal :

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

    Si vous l'avez déjà, nous vous recommandons de la mettre à jour. Pour cela, exécutez la commande suivante dans votre terminal :

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

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

  <Step title="S'authentifier">
    Maintenant, pour vous authentifier et utiliser les autres commandes de la CLI, vous trouverez votre clé d'autorisation [ici](https://squarecloud.app/fr/account/security) en cliquant sur « Request API Key ». Après avoir obtenu votre clé d'autorisation, exécutez la commande suivante :

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

  <Step title="Téléverser votre projet">
    Enfin, pour déployer votre application sur Square Cloud à l'aide de la CLI, vous devez exécuter la commande suivante :

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

    Ou si vous avez créé le zip manuellement, vous pouvez utiliser :

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

## Ressources supplémentaires

Pour plus d'informations sur Next.js et ses outils, consultez la [documentation officielle de Next.js](https://nextjs.org/docs).
Vous y trouverez des guides détaillés, des tutoriels et une documentation d'API pour vous aider à tirer le meilleur parti de Next.js.

### CI/CD

Nous disposons d'une GitHub Action qui facilite la mise à jour de votre projet. Vous pouvez en savoir plus [ici](https://squarecloud.app/fr/resources/github-action)\
Vous pouvez créer un workflow comme celui-ci :

```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 }}'
```

## Dépannage

<CardGroup cols={1}>
  ### Domaine personnalisé

  <Card horizontal>
    Pour utiliser un domaine personnalisé (par exemple `mysite.com`) au lieu de l'URL par défaut `mysite.squareweb.app`, vous avez besoin du **plan Standard ou supérieur**. Le sous-domaine est défini par le champ **SUBDOMAIN** dans le fichier de configuration.
  </Card>

  ### Prérequis minimum en RAM

  <Card horizontal>
    **Minimum : 512 Mo de RAM** pour les sites web/API simples. Pour les sites utilisant des frameworks (Next.JS, React, Vue, Angular, etc.), nous recommandons toujours **au moins 1 Go de RAM**. Pour les applications plus volumineuses, allouez davantage de RAM afin d'éviter que l'application ne manque de mémoire et ne plante.
  </Card>

  ### Impossible de trouver ce site.

  <Card horizontal>
    Vérifiez que le **sous-domaine/domaine** correspond à ce qui est configuré dans le champ **SUBDOMAIN** ou dans les **paramètres du domaine personnalisé**. Si vous venez tout juste de mettre en ligne le site, patientez jusqu'à **60 secondes** pour que Square active le **premier accès**.
  </Card>

  ### Le site a mis trop de temps à répondre...

  <Card horizontal>
    Vérifiez que vous avez correctement configuré le **port 80** et l'hôte **0.0.0.0** dans l'application. Nous recommandons d'utiliser les variables d'environnement forcées par Square : **PORT** et **HOST** du fichier `.env`.
  </Card>
</CardGroup>

## Contactez-nous

Si vous rencontrez toujours des **difficultés techniques**, notre **équipe de support spécialisée** est disponible pour vous aider. [**Contactez-nous**](https://squarecloud.app/fr/support) et nous serons ravis de vous aider à résoudre tout problème.