Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

静的サイト

最終更新 Markdown で表示Agent セットアップ

Next.js ↗ は、Web サイトとアプリケーションを作るためのオープンソースの React フレームワークです。このガイドでは、静的な Next.js アプリケーションを作成し、Cloudflare Pages でデプロイします。

静的エクスポート ↗ を使う静的サイトの Next.js プロジェクトをデプロイする手順を説明します。

続ける前に

すべてのフレームワークガイドは、Git ↗ の基本的な理解があることを前提としています。Git を初めて使う場合は、この Git ハンドブックの要約 ↗ で、ローカルマシンへの Git のセットアップ方法を確認してください。

SSH でクローンする場合は、GitHub に対して push または pull する各コンピューターで SSH キーを生成 ↗ する必要があります。

詳細は GitHub のドキュメント ↗ と Git のドキュメント ↗ を参照してください。

Next.js プロジェクトを選ぶ

すでにデプロイしたい Next.js プロジェクトがある場合は、静的エクスポート向けに設定 ↗ されていることを確認し、そのディレクトリに移動して次の手順へ進みます。ない場合は、create-next-app で新しい Next.js プロジェクトを作成します。

npx create-next-app --example with-static-export my-app

プロジェクトを作成すると、公式の with-static-export ↗ 例をテンプレートとして、新しい my-app ディレクトリが生成されます。作業を続けるには、このディレクトリに移動します。

cd my-app

GitHub リポジトリを作成する

repo.new ↗ にアクセスして新しい GitHub リポジトリを作成します。リポジトリの準備ができたら、ターミナルで次のコマンドを実行し、ローカルのアプリケーションを GitHub にプッシュします。

git remote add origin https://github.com/<GH_USERNAME>/<REPOSITORY_NAME>.git
git branch -M main
git push -u origin main

アプリケーションを Cloudflare Pages にデプロイする

サイトを Pages にデプロイする手順は次のとおりです。

  1. Cloudflare ダッシュボードで Workers & Pages ページを開きます。

    Workers & Pages を開く ↗

  2. Create application を選択します。

  3. Pages タブを選択します。

  4. Import an existing Git repository を選択します。

  5. 作成した新しい GitHub リポジトリを選択し、Begin setup を選択します。

  6. Build settings セクションで、Framework preset に Next.js (Static HTML Export) を選びます。選ぶと、次の情報が表示されます。

設定項目値
本番ブランチmain
ビルドコマンドnpx next build
ビルドディレクトリout

サイトの設定が終わったら、最初のデプロイを開始できます。Cloudflare Pages は next とプロジェクトの依存関係をインストールし、サイトをビルドしてからデプロイします。

サイトをプレビューする

サイトをデプロイすると、プロジェクト専用の *.pages.dev サブドメインが割り当てられます。

Next.js サイトに新しいコードをコミットするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。新しいプルリクエストでは プレビューデプロイ も利用できるので、本番に出す前に変更後の見た目を確認できます。

Cloudflare Pages への初回サイトデプロイの手順は、はじめに を参照してください。

役に立ちましたか？