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

# Next.js アプリケーションをホストする方法

> Square Cloud で Next.js アプリケーションをデプロイする方法を学びましょう。

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"

## はじめに

Square Cloud で {appType_0} を開発してホストするには、構成と前提条件の体系的な手順に従うことが不可欠です。この技術ガイドでは、初期セットアップから本番環境へのデプロイまで、プロセス全体を解説します。

### 前提条件

* **Square Cloud アカウント**: [登録ページ](https://squarecloud.app/ja/signup)からメールアドレスを使って登録します。
* **有効な有料プラン**: アプリケーションに専用リソースと最適化されたパフォーマンスを提供します。[利用可能なプラン](https://squarecloud.app/ja/pricing)を確認し、ニーズに最も適したものを選択してください。

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

## プロジェクトの作成

始める前に、システムに Node.js と npm がインストールされていることを確認してください。まだお持ちでない場合は、[公式の Node.js ウェブサイト](https://nodejs.org/)からダウンロードできます。

新しい Next.js プロジェクトを作成するには、次のコマンドを実行します。

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

このコマンドで、`my-app` は新しいプロジェクトの名前です。`my-app` はプロジェクトに付けたい任意の名前に置き換えることができます。`npx` コマンドは Node.js のパッケージマネージャーである `npm` に付属するツールです。プロジェクト内にローカルにインストールされている、または npm レジストリ上にリモートで利用可能な Node.js パッケージを実行するために使用します。

`create-next-app` は npm レジストリで利用可能なパッケージで、新しい Next.js プロジェクトを自動的にセットアップします。プロジェクトディレクトリの作成、必要な依存関係のインストール、基本ファイルの設定といった初期セットアップをすべて処理します。

`@latest` は、`create-next-app` パッケージの最新バージョンを使用したいことを指定するタグです。これにより、常に最新のバージョンを使用でき、その結果として最新の機能にアクセスできるようになります。

### ポート 80 の設定

ポート 80 は HTTP トラフィックのデフォルトポートです。Square Cloud で Next.js ウェブサイトをホストするには、ポート 80 の使用を設定することが不可欠です。Next.js では、起動スクリプトに `-p 80` パラメータを設定することで、ウェブサイトがこのポートで正しく実行されるようにできます。

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

## プロジェクトのビルド

アップロードする前に本番用の出力をビルドします。

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

これにより本番用の next バンドルが生成されます。`.next` フォルダが生成されます。

## デプロイ

プロジェクトファイルの準備ができたら、それらを Square Cloud にアップロードしてプロジェクトをホストできます。
そのためには、すべてのプロジェクトファイルを含む ZIP ファイルを作成してください。\
`.next` の `cache` フォルダを含めないように注意してください。

<PortNote lang="ja" />

### ダッシュボード経由

<Steps>
  <Step title="アップロードページにアクセス">
    [アップロードページ](https://squarecloud.app/ja/dashboard/new)にアクセスし、プロジェクトの zip ファイルをアップロードします。
  </Step>

  <Step title="環境を設定">
    zip をアップロードした後、プロジェクトの名前、メインファイルまたはランタイム環境、その他の設定を構成する必要があります。\
    ウェブプロジェクトをアップロードする場合は、必ず「Web Publication」を選択し、プロジェクトにサブドメインを設定してください。
  </Step>

  <Step title="プロジェクトをデプロイ">
    最後に「Deploy」ボタンをクリックして、プロジェクトを Square Cloud にホストします。\
    デプロイ後、ダッシュボードからプロジェクトのステータスとログを監視できます。

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading.gif" alt="Square Cloud へのアプリケーションのアップロード" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Step>
</Steps>

### CLI 経由

この方法を使用するには、プロジェクトのルートディレクトリに `squarecloud.app` という名前の設定ファイルを作成する必要があります。このファイルには、プロジェクトに必要な設定が含まれます。

<Card title="詳細はこちら: Square Cloud の設定ファイルの作成方法。" icon="link" href="/ja/getting-started/config-file">
  squarecloud.app ファイルはアプリケーションを構成するために使用される設定ファイルであり、環境を定義するために使用されます。
</Card>

<Steps>
  <Step title="CLI をインストール">
    まず、環境に CLI がインストールされている必要があります。まだの場合は、ターミナルで次のコマンドを実行してください:

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

    すでにお持ちの場合は、更新することを推奨します。更新するには、ターミナルで次のコマンドを実行してください:

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

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

  <Step title="認証">
    次に、認証して他の CLI コマンドを使用するには、[こちら](https://squarecloud.app/ja/account/security)で「Request API Key」をクリックして認証キーを取得します。認証キーを取得したら、次のコマンドを実行してください:

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

  <Step title="プロジェクトをアップロード">
    最後に、CLI を使用してアプリケーションを Square Cloud にデプロイするには、次のコマンドを実行する必要があります:

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

    または、zip を手動で作成した場合は、次を使用できます:

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

## その他のリソース

Next.js とそのツールの詳細については、[公式の Next.js ドキュメント](https://nextjs.org/docs)をご覧ください。
そこには、Next.js を最大限に活用するのに役立つ詳細なガイド、チュートリアル、API ドキュメントがあります。

### CI/CD

プロジェクトの更新を容易にする GitHub Action を提供しています。詳細は[こちら](https://squarecloud.app/ja/resources/github-action)をご覧ください。\
次のようなワークフローを作成できます。

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

## トラブルシューティング

<CardGroup cols={1}>
  ### カスタムドメイン

  <Card horizontal>
    デフォルトの URL `mysite.squareweb.app` の代わりにカスタムドメイン（例: `mysite.com`）を使用するには、**Standard プラン以上**が必要です。サブドメインは設定ファイルの **SUBDOMAIN** フィールドで定義します。
  </Card>

  ### 最小 RAM 要件

  <Card horizontal>
    シンプルなウェブサイト/API の場合は**最小 512MB RAM**です。フレームワーク（Next.JS、React、Vue、Angular など）を使用するサイトでは、常に**最低 1GB RAM**を推奨します。より大規模なアプリケーションでは、メモリ不足でアプリケーションがクラッシュするのを防ぐため、より多くの RAM を割り当ててください。
  </Card>

  ### このサイトが見つかりませんでした。

  <Card horizontal>
    **サブドメイン/ドメイン**が **SUBDOMAIN** フィールドまたは**カスタムドメイン設定**で構成されている内容と一致しているか確認してください。サイトをアップロードしたばかりの場合は、Square が**初回アクセス**を有効化するまで**最大 60 秒**お待ちください。
  </Card>

  ### サイトの応答に時間がかかりすぎました...

  <Card horizontal>
    アプリケーションで**ポート 80** と**ホスト 0.0.0.0** を正しく設定しているか確認してください。Square の強制環境変数である `.env` ファイルの **PORT** と **HOST** を使用することを推奨します。
  </Card>
</CardGroup>

## お問い合わせ

**技術的な問題**が解決しない場合は、**専門のサポートチーム**がお手伝いします。[**お問い合わせ**](https://squarecloud.app/ja/support)いただければ、どのような問題でも喜んで解決をサポートいたします。