こんにちは！今回初めて投稿させていただきます ラテ です！
Next.js/JavaScriptを中心に、既存WebアプリのUI改善・技術刷新が得意な入社3年目のフロントエンジニアです。
はじめに
弊社NeulabではNext.jsを使って開発することが多いので、Next.jsのプロジェクトの始め方から紹介したいと思います。
この記事では以下を実際にやってみます。
- Next.js App Router を使ったプロジェクトの作成
- GitHub に push して Vercel に初回デプロイ
- 変更を push するだけで自動デプロイされる仕組みの確認
この記事で扱うこと
- Next.js App Router を使ったプロジェクトの作成
- GitHub へソースコードを push
- Vercel でのデプロイ
- GitHub と連携した CI/CD（push すると自動デプロイされる状態）
この記事で扱わないこと
- Next.js によるアプリケーション設計の詳細
- コンポーネント設計や状態管理
- パフォーマンス最適化や高度な App Router の使い方
あくまで 「Next.js のアプリを Vercel にデプロイし、開発〜本番反映までの流れを体験する」 ことが目的です。
Next.js そのものの深い解説は本記事では行いません。
前提条件（動作環境）
この記事は 2025年12月時点 の情報をもとに記載しています。
以下の環境がローカルマシンにインストールされていることを前提とします。
必要なもの
- Node.js
- npm（Node.js に同梱）
- GitHub アカウント
- Vercel アカウント（GitHub 連携で OK）
推奨バージョン（2025年12月時点）
| ソフトウェア | バージョン例 |
|---|---|
| Node.js | v20.x（LTS） |
| npm | v10.x |
Node.js がインストールされているかは、以下のコマンドで確認できます。
node -v
npm -vまだインストールされていない場合は、公式サイトから LTS 版 をインストールしてください。
プロジェクト作成
まずは Next.js プロジェクトを作成します。
npx create-next-app@latest my-appセットアップ時に以下のオプションを選びます（推奨設定例）:
? Would you like to use the recommended Next.js defaults? › - Use arrow-keys. Return to submit.
❯ Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router
No, reuse previous settings
No, customize setting これで my-app ディレクトリが作成されます。
ディレクトリ構成（App Router）
生成されたプロジェクトの中身を見てみましょう。
my-app/
app/
page.tsx
layout.tsx
public/
...app/page.tsx: トップページのコンポーネントapp/layout.tsx: ページ全体のレイアウトを定義
これが App Router の基本的な構成です。
開発サーバーを立ち上げる
cd my-app
npm run devブラウザで http://localhost:3000 を開くと、Next.js の初期画面が表示されます。
ファイルを編集するとホットリロードですぐ反映されるのも特徴です。
GitHub にpush
Vercel へのデプロイに向けて、ソースコードを GitHub にアップロードします。
まずGitHubにリポジトリを作成します。
git init
git add .
git commit -m "initial commit"
git branch -M main
git remote add origin https://github.com/<username>/my-app.git
git push -u origin main
Vercel にデプロイ
- Vercel にログイン（GitHub アカウントで OK）
- 「New Project」 → 先ほど push したリポジトリを選択
- 「Deploy」をクリック
これだけで、自動的にビルド・デプロイされ、公開用 URL が発行されます。
Add New projectを選択します。
my-appをimportします。
Deployをクリックします。
Deploy完了しました！
Domainsが公開URLです。
デプロイ確認
発行された URL にアクセスすると、先ほど作成した Next.js サイトが表示されます。
https://my-app-one-eta-34.vercel.app
さらに、ローカルでコードを修正して GitHub に push すると、自動的に再ビルドされ、最新の変更がデプロイされます。
ここで重要なのは、この時点で Vercel と GitHub の連携が完了しており、すでに「push すると自動でデプロイされる状態」になっている点です。
以降は、特別な設定を追加する必要はありません。
簡単なページを追加してpushで自動デプロイを体験
試しに app/about/page.tsx を作成してみましょう。
export default function AboutPage() {
return <h1>About Page Add</h1>
}これで /about にアクセスすると、新しいページが表示されます。
では最新のソースコードをGitHubにpushしてみましょう。
git add -u
git commit -m "about_page_add"
git pushpushをすると、Vercelの画面はこんな感じになります。
Buildingになっていますね。
つまり、最初の一度セットアップしてしまえば、あとはコードを修正して push するだけで、毎回自分でデプロイ作業を行う必要はありません。
こちらにアクセスすると追加したページが表示されます。
https://my-app-one-eta-34.vercel.app/about
こんな感じでCI/CD が標準で組み込まれているのが Vercel の強みです。
おわりに
今回は Next.js App Router を使ったプロジェクトを作り、Vercel でデプロイする流れを紹介しました。
Vercel では、GitHub と連携するだけで CI/CD 環境が自動的に構築されるため、インフラ設定に時間をかけず、開発に集中できます。
- App Router によるシンプルなページ構成
- Vercel での簡単デプロイ
- push すれば自動で本番反映
この組み合わせは開発体験が非常にスムーズなので、個人開発やプロトタイプにも最適です。
プログラミング初心者の方はぜひ試してみてください！
