■

はじめに

Next.js は、サーバーサイドレンダリングや静的サイト生成などの機能が充実した React ベースのフレームワークです。本記事では、Next.js を開発した Vercel 社のホスティングサービス「Vercel」を利用して、Next.js プロジェクトをデプロイする方法を解説します。

前提条件

  • 以下の準備が整っている必要があります
    • GitHub アカウントが作成済み
    • Vercel アカウントが作成済み

プロジェクトの準備

  • Next.js プロジェクトの作成

    • 以下のコマンドを実行して新しい Next.js プロジェクトを作成します：
npx create-next-app@latest
  • プロジェクト名を指定
    • フォルダ名と同じ場合は「.」を入力します
Need to install the following packages:
create-next-app@15.1.3
Ok to proceed? (y) y
? What is your project named? » .
  • 以下質問にはすべてデフォルトで作成
√ Would you like to use TypeScript? ... No / 〇Yes
√ Would you like to use ESLint? ... No / 〇Yes
√ Would you like to use Tailwind CSS? ... No / 〇Yes
√ Would you like your code inside a `src/` directory? ... No / 〇Yes
√ Would you like to use App Router? (recommended) ... No / 〇Yes
√ Would you like to use Turbopack for `next dev`? ... No / 〇Yes
? Would you like to customize the import alias (`@/*` by default)? » 〇No / Yes
  • 変更をコミット
git add -A
git commit -m "first commit"

GitHub にプロジェクトを作成・プッシュ

リポジトリを作成

  • GitHub で新しいリポジトリを作成します：
    • Githubのレポジトリ作成ページへ遷移します
    • Repository Name にリポジトリ名を入力します
    • 必要に応じて「Public」または「Private」を選択します
    • 「Create repository」をクリックしてリポジトリを作成します image.png

リポジトリへコードをプッシュ

  • リポジトリ作成後、表示されるコマンドをコピーしてターミナルで実行します： image.png
git remote add origin https://github.com/○○/deploy-test.git
git branch -M main
git push -u origin main

Vercelへデプロイ

  • Vercel のデプロイページにアクセスします：リンク

  • 「Start Deploying」をクリックします image.png

  • GitHub に接続されているプロジェクト一覧から、デプロイしたいプロジェクトを選択し、「Import」をクリックします ※ない場合は「Adjust Github App Permissions」にてプロジェクトを追加します image.png

  • 確認後、「Deploy」をクリックします image.png

  • 「Continue to Dashboard」を押します image.png

  • 「Visit」を押します image.png

  • デプロイされていることを確認します image.png