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

# Cómo alojar una aplicación Next.js

> Aprende a desplegar tu aplicación Next.js en 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"

## Introducción

Para desarrollar y alojar {appType_0} en Square Cloud, es esencial seguir una secuencia estructurada de configuraciones y requisitos previos. Esta guía técnica cubrirá todo el proceso, desde la configuración inicial hasta el despliegue en producción.

### Requisitos previos

* **Cuenta de Square Cloud**: Regístrate a través de la [página de registro](https://squarecloud.app/es/signup) usando tu correo electrónico.
* **Plan de pago activo**: Garantiza recursos dedicados y un rendimiento optimizado para tu aplicación. Consulta nuestros [planes disponibles](https://squarecloud.app/es/pricing) y elige el más adecuado para tus necesidades.

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

## Creando el proyecto

Antes de comenzar, asegúrate de tener Node.js y npm instalados en tu sistema. Si aún no los tienes, puedes descargarlos desde el [sitio oficial de Node.js](https://nodejs.org/).

Para crear un nuevo proyecto Next.js, ejecuta el siguiente comando:

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

En este comando, `my-app` es el nombre de tu nuevo proyecto. Puedes reemplazar `my-app` por cualquier nombre que quieras para tu proyecto. El comando `npx` es una herramienta que viene con `npm`, el gestor de paquetes de Node.js. Se utiliza para ejecutar paquetes de Node.js que están instalados localmente en tu proyecto o que están disponibles de forma remota en el registro de npm.

`create-next-app` es un paquete disponible en el registro de npm que configura un nuevo proyecto Next.js automáticamente. Se encarga de toda la configuración inicial, como crear el directorio del proyecto, instalar las dependencias necesarias y configurar los archivos básicos.

`@latest` es una etiqueta que especifica que quieres usar la última versión del paquete `create-next-app`. Esto garantiza que siempre estés usando la versión más actualizada y, en consecuencia, tengas acceso a las últimas funcionalidades.

### Configurando el puerto 80

El puerto 80 es el puerto predeterminado para el tráfico HTTP. Para alojar un sitio web Next.js en Square Cloud, es fundamental configurar el uso del puerto 80. En Next.js, puedes establecer el parámetro `-p 80` en el script de inicio para asegurarte de que tu sitio web se ejecute correctamente en este puerto.

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

## Compilando el proyecto

Compila la salida de producción antes de subir el proyecto:

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

Esto generará el bundle de Next para producción, creando la carpeta `.next`.

## Desplegando

Después de preparar los archivos de tu proyecto, ya puedes subirlos a Square Cloud y alojar tu proyecto.
Para ello, crea un archivo ZIP que contenga todos los archivos de tu proyecto. \
Asegúrate de no incluir la carpeta `cache` de `.next`.

<PortNote lang="en" />

### A través del panel

<Steps>
  <Step title="Accede a la página de subida">
    Accede a la [página de subida](https://squarecloud.app/es/dashboard/new) y sube el archivo zip de tu proyecto.
  </Step>

  <Step title="Configura tu entorno">
    Después de subir tu zip, deberás configurar el nombre, el archivo principal o el entorno de ejecución y otros ajustes de tu proyecto.\
    Si estás subiendo un proyecto web, asegúrate de seleccionar "Publicación Web" y de definir un subdominio para tu proyecto.
  </Step>

  <Step title="Despliega tu proyecto">
    Por último, haz clic en el botón "Deploy" para alojar tu proyecto en Square Cloud.\
    Tras el despliegue, puedes monitorear el estado y los logs de tu proyecto desde el panel.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading.gif" alt="Subiendo aplicación a Square Cloud" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Step>
</Steps>

### A través de la CLI

Para usar este método, necesitas crear un archivo de configuración llamado `squarecloud.app` en el directorio raíz de tu proyecto. Este archivo contendrá la configuración necesaria para tu proyecto.

<Card title="Aprende más sobre: cómo crear el archivo de configuración para Square Cloud." icon="link" href="/es/getting-started/config-file">
  El archivo squarecloud.app es un archivo de configuración que se usará para configurar tu aplicación; se utilizará para definir tu entorno.
</Card>

<Steps>
  <Step title="Instala la CLI">
    Primero, necesitas tener la CLI instalada en tu entorno. Si aún no la tienes, ejecuta el siguiente comando en tu terminal:

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

    Si ya la tienes, te recomendamos actualizarla. Para ello, ejecuta el siguiente comando en tu terminal:

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

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

  <Step title="Autentícate">
    Ahora, para autenticarte y usar otros comandos de la CLI, encontrarás tu clave de autorización [aquí](https://squarecloud.app/es/account/security) haciendo clic en "Request API Key". Después de obtener tu clave de autorización, ejecuta el siguiente comando:

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

  <Step title="Sube tu proyecto">
    Por último, para desplegar tu aplicación en Square Cloud usando la CLI, necesitas ejecutar el siguiente comando:

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

    O si creaste el zip manualmente, puedes usar:

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

## Recursos adicionales

Para más información sobre Next.js y sus herramientas, visita la [documentación oficial de Next.js](https://nextjs.org/docs).
Allí encontrarás guías detalladas, tutoriales y documentación de la API para ayudarte a aprovechar Next.js al máximo.

### CI/CD

Tenemos una GitHub Action que facilita la actualización de tu proyecto. Puedes ver más [aquí](https://squarecloud.app/es/resources/github-action)\
Puedes crear un workflow como este:

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

## Solución de problemas

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

  <Card horizontal>
    Para usar un dominio personalizado (por ejemplo, `mysite.com`) en lugar de la URL predeterminada `mysite.squareweb.app`, necesitas el **plan Standard o superior**. El subdominio se define mediante el campo **SUBDOMAIN** en el archivo de configuración.
  </Card>

  ### Requisitos mínimos de RAM

  <Card horizontal>
    **Mínimo: 512MB de RAM** para sitios web/APIs sencillos. Para sitios con frameworks (Next.JS, React, Vue, Angular, etc.), siempre recomendamos **al menos 1GB de RAM**. Para aplicaciones más grandes, asigna más RAM para evitar que la aplicación se quede sin memoria y falle.
  </Card>

  ### No se pudo encontrar este sitio.

  <Card horizontal>
    Verifica que el **subdominio/dominio** coincida con lo configurado en el campo **SUBDOMAIN** o en la **configuración del dominio personalizado**. Si acabas de subir el sitio, espera hasta **60 segundos** para que Square habilite el **primer acceso**.
  </Card>

  ### El sitio tardó demasiado en responder...

  <Card horizontal>
    Verifica que hayas configurado correctamente el **puerto 80** y el **host 0.0.0.0** en la aplicación. Recomendamos usar las variables de entorno forzadas de Square: **PORT** y **HOST** del archivo `.env`.
  </Card>
</CardGroup>

## Contáctanos

Si continúas enfrentando **dificultades técnicas**, nuestro **equipo de soporte especializado** está disponible para ayudarte. [**Contáctanos**](https://squarecloud.app/es/support) y estaremos encantados de ayudarte a resolver cualquier problema.