静的サイト
Next.js ↗ は、ウェブサイトやアプリケーションを作成するためのオープンソースの React フレームワークです。このガイドでは、新しい Next.js アプリケーションを作成し、Cloudflare Pages を使用してデプロイします。
このガイドでは、静的エクスポート ↗を使用して静的サイト Next.js プロジェクトをデプロイする方法を説明します。
All of the framework guides assume you already have a fundamental understanding of Git ↗. If you are new to Git, refer to this summarized Git handbook ↗ on how to set up Git on your local machine.
If you clone with SSH, you must generate SSH keys ↗ on each computer you use to push or pull from GitHub.
Refer to the GitHub documentation ↗ and Git documentation ↗ for more information.
デプロイしたい Next.js プロジェクトがすでにある場合は、それが 静的エクスポート用に構成されている ↗ことを確認し、そのディレクトリに移動して次のステップに進んでください。そうでない場合は、create-next-appを使用して新しい Next.js プロジェクトを作成します。
npx create-next-app --example with-static-export my-appプロジェクトを作成すると、公式の with-static-export ↗ サンプルをテンプレートとして使用して、新しい my-app ディレクトリが生成されます。このディレクトリに移動して続行します。
cd my-apprepo.new ↗ にアクセスして新しい GitHub リポジトリを作成します。新しいリポジトリを作成した後、以下のコマンドをターミナルで実行して、ローカルアプリケーションを GitHub に準備してプッシュします。
git remote add origin https://github.com/<GH_USERNAME>/<REPOSITORY_NAME>.gitgit branch -M maingit push -u origin mainサイトを Pages にデプロイするには：
- Cloudflare ダッシュボード ↗ にログインし、アカウントを選択します。
- アカウントホームで、Workers & Pages > アプリケーションを作成 > Pages > Git に接続を選択します。
- 作成した新しい GitHub リポジトリを選択し、ビルドとデプロイの設定セクションで、フレームワークプリセットとして Next.js (静的 HTML エクスポート) を選択します。選択により、以下の情報が提供されます。
| Configuration option | Value |
|---|---|
| Production branch | main |
| Build command | npx next build |
| Build directory | out |
サイトの設定が完了したら、最初のデプロイを開始できます。Cloudflare Pages は next、プロジェクトの依存関係をインストールし、サイトをビルドしてからデプロイします。
サイトをデプロイした後、*.pages.dev にプロジェクト用のユニークなサブドメインが割り当てられます。
Next.js サイトに新しいコードをコミットするたびに、Cloudflare Pages は自動的にプロジェクトを再ビルドしてデプロイします。また、新しいプルリクエストで プレビューデプロイメント にアクセスできるため、変更が本番環境にデプロイされる前にサイトにどのように表示されるかをプレビューできます。
Cloudflare Pages に最初のサイトをデプロイするための完全なガイドについては、始めるガイド を参照してください。