1️⃣
Day1：Next.js × Vercel で環境構築から初めてのデプロイ
はじめに
今日、大塚あみさんの著書 『＃100日チャレンジ 毎日連続100本アプリを作ったら人生が変わった』 を読み、
「なるべく毎日コードを書いてアウトプットすることで学習を加速させよう」
と決意しました。そこで Day 1 として、
Next.js プロジェクトを Vercel にデプロイ するまでの流れをまとめます。
対象読者
- Next.js × Vercel を初めて触る人
- 独自ドメインを付けるべきか迷っている人
今日のゴール
- Next.js プロジェクトを作成する
- ホーム画面作成
- GitHub → Vercel で初めてのデプロイを行う
Next.js プロジェクトの作成手順
# 任意のフォルダで実行
npx create-next-app@latest my-portfolio \
--typescript \
--eslint \
--tailwind \
--src-dir \
--import-alias "@/*"
cd my-portfolio
| オプション | 意味 |
|---|---|
--typescript |
TypeScript プロジェクトを生成 |
--tailwind |
Tailwind CSS を自動設定 |
--src-dir |
src/ 直下に app/ や components/ を配置 |
--import-alias |
@/components/… のようにエイリアスインポートが可能 |
開発サーバーを起動
npm run dev # http://localhost:3000 で確認
ホーム画面作成
ディレクトリ構造
my-app/
└─ app/ ← 新しい App Router 用ディレクトリ
├─ layout.tsx ← ルートレイアウト（必須）
├─ page.tsx ← 「/」 に相当するページ
layout.tsx とは？
app/ ディレクトリ以下にに置く「共通レイアウト（包み込む UI）」を定義するファイル
すべての子ページ (page.tsx) や下位レイアウトを 必ず包み込んで表示 します。
Vercel へデプロイ
-
npm run buildで確認 - Vercel にアクセス し、右上の “Log in” をクリック。
- GitHub アカウントで認証 し、Vercel App をリポジトリにインストール。
- ダッシュボードで “New Project” を選択。
- my-portfolio リポジトリをクリックしてインポート。
- デプロイ設定（フレームワーク検出・ビルドコマンド）はデフォルトで OK。
- “Deploy” を押してビルド完了を待つ（数十秒〜1 分）。
Production URL（https://my-portfolio.vercel.app）が表示されたら成功！
npm run dev と npm run build の違い
npm run dev # ホットリロード付き開発サーバー
npm run build # 最適化ビルド。本番用チェックゲート
- dev は速度優先、エラーを画面にオーバーレイ表示。
- build は最適化 + ESLint/型チェックを通過しないと失敗 → Vercel も同じ流れ。
Production と Preview の URL
| 種類 | 例 | 生成タイミング | 用途 |
|---|---|---|---|
| Production | https://my-portfolio.vercel.app |
main ブランチに push/merge |
公開サイト（固定） |
| Preview | https://my-portfolio-git-feature-x-username.vercel.app |
他ブランチの push / PR | レビュー・テスト用（毎回変わる） |
ポイントは 「公式に渡すのは Production URL」。Preview はリンク切れになりやすいので注意。
独自ドメインを付ける or 付けない？
コスト
- ドメイン取得費用：
.comで 約 ¥1,000〜¥2,000 / 年 - Vercel への接続 & SSL： ¥0（Hobby プランでも可）
無料（vercel.app）のまま運用するデメリット
- ブランド感 & 信頼感が弱い
- SEO がやや不利（サブドメイン扱い）
- 公式メール を同一ドメインで持てない
- プラン制限（転送量 100 GB/月 など）
結論: ポートフォリオや小規模サイトならまず無料で始め、
需要が出てきたら独自ドメイン + Pro プランを検討で十分。
私自身もまずは無料のまま走り出しました。
以上、同じ疑問を持った方の参考になれば嬉しいです 🙌
Discussion